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">

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

  • 相关阅读:
    java实现文件上传下载至ftp服务器
    理解java代理模式
    [置顶] 理解java中的线程池
    wait,notify,非阻塞队列实现生产者,消费者模型
    理解java阻塞队列BlockingQueue
    CentOS下安装配置Nginx
    putty笔记
    CentOs下安装jdk、MySql、Redis笔记
    简述yum和apt-get的区别
    Linux 文件颜色说明
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5308130.html
Copyright © 2011-2022 走看看