zoukankan      html  css  js  c++  java
  • [Angular 2] Build a select dropdown with *ngFor in Angular 2

    We want the start-pipe more flexable to get param, so when using it, we pass a second param as status:

    <li *ngFor="#todo of todoService.todos | started : 'started'">

    It will be handled as a second param which is an array of the transform() function:

        transform(todos, [status]){
            return todos.filter(
                (todoModel) => {
                    // Only showing the todo starts with 'e'
                    return todoModel.status === status;
                }
            )
        }

    So No we will only pipe 'started' status. We need a selector to handle the status:

    import {Component, EventEmitter, Output} from 'angular2/core';
    @Component({
        selector: "status-selector",
        template: `
            <div>
                <select #sel (change)="selectedStatus.emit(sel.value)">
                    <option *ngFor="#status of statuses">
                        {{status}}
                    </option>
                </select>
            </div>
        `
    })
    
    export class StatusSelector{
        @Output() selectedStatus = new EventEmitter();
        statuses = ["started", "completed"];
    
        ngOnInit(){
            this.selectedStatus.emit(this.statuses[0]);
        }
    }

    And pass the output to the list:

        template: `
            <todo-input></todo-input>
            <status-selector (selectedStatus)="status=$event"></status-selector>
            <todo-list [status]="status"></todo-list>
        `

    Then in the list, we use that selected status:

    <li *ngFor="#todo of todoService.todos | started : status">

    ------------------------------

  • 相关阅读:
    Nginx 限流配置
    Nginx 跨域配置
    LVS实现负载均衡原理及安装配置详解
    Tomcat基本概念
    Hapoxy 基本配置概念
    rsync断点续传
    Nginx概念
    angular img标签使用err-src
    $ionicLoading自定义加载动画
    h5+jquery自制相机,获取图片并上传
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5308130.html
Copyright © 2011-2022 走看看