[Angular 2] Build a select dropdown with *ngFor in Angular 2

时间:2022-07-08 10:25:11

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

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

[Angular 2] Build a select dropdown with *ngFor in Angular 2的更多相关文章

  1. JSF 2 multiple select dropdown box example

    In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...

  2. Angular 1 深度解析:脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  3. &lbrack;Angular CLI&rsqb; Build application without remove dist folder for Docker Volume

    When we develop the Angular app inside Docker container, we can simulate Production envioment by bui ...

  4. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  5. Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing

    今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...

  6. Angular 学习笔记 &lpar;Material Select and AutoComplete&rpar;

    记入一些思考 : 这 2 个组件有点像,经常会搞混. select 的定位是选择. 目前 select 最糟糕的一点是 not search friendly. 还有当需要 multiple sele ...

  7. webstorm 打包angular Module build failed&colon; Error&colon; No PostCSS Config found

    angular创建项目后,在webstorm中启动时,报出如题错误,奇怪的是我从命令行启动(ng server)是没有问题的,多方寻求无果,在网上看到过说要加一个配置文件,我不信.我觉得是我配置哪里有 ...

  8. angular中的 input select 值绑定无效,以及多出一个空白选项问题

    问题: <!-- 问题标签 --> <select ng-model="sortType"> <option value="1"& ...

  9. Angular JS ng-model对&lt&semi;select&gt&semi;标签无效的情况

    使用场景一: <select ng-if="item.award_type==1" id="award{{$index+1}}" name="X ...

随机推荐

  1. 游戏服务器菜鸟之C&num;初探四游戏服务

    经过多次折腾之后,在一次进行了一次重大的重构,去解决问题 主要重构如下 1.将原来的单一协议修改多协议进行,一些查询.认证的功能都采用HTTP进行,避免全部采用TCP链接资源的消耗: 2.原来单一的部 ...

  2. codeforces 558B&period; Amr and The Large Array 解题报告

    题目链接:http://codeforces.com/problemset/problem/558/B 题目意思:给出一个序列,然后找出出现次数最多,但区间占用长度最短的区间左右值. 由于是边读入边比 ...

  3. RAD&comma;V模型

    介绍: RAD(Rap Application Developmen快速应用开发t)模型是软件开发过程中的一个重要模型,由于模型构图类似字母V,所以又称为软件开发的V模型.它通过开发和测试同时进行的方 ...

  4. 配置xdebug远程调试php的三种方法(配合phpstorm)

    使用xdebug对PHP进行远程调试是一个php程序员一定要掌握的技能,关于在本机设置xdebug进行调试的方法,请自行百度,下面说一下如何配置远程服务器在开发机上的调试. 首先要在远程服务器上安装x ...

  5. LaTeX排版指南

    V0.0.1 工具链 CTeX:http://www.ctex.org/HomePage ,CTeX是一个中文套装,但也同时发布一个独立的ctex宏包 TeXLive:https://tug.org/ ...

  6. 《Android源代码设计模式解析与实战》读书笔记(十四)

    第十四章.迭代器模式 迭代器模式,又叫做游标模式.是行为型设计模式之中的一个.我们知道对容器对象的訪问必定会涉及遍历算法.我们能够将遍历的方法封装在容器中,或者不提供遍历方法,让使用容器的人自己去实现 ...

  7. Netty&lpar;三&rpar; 什么是 TCP 拆、粘包?如何解决?

    前言 记得前段时间我们生产上的一个网关出现了故障. 这个网关逻辑非常简单,就是接收客户端的请求然后解析报文最后发送短信. 但这个请求并不是常见的 HTTP ,而是利用 Netty 自定义的协议. 有个 ...

  8. java 虚拟机内存划分&comma;类加载过程以及对象的初始化

    涉及关键词: 虚拟机运行时内存 java内存划分 类加载顺序  类加载时机  类加载步骤  对象初始化顺序  构造代码块顺序 构造方法 顺序 内存区域   java内存图  堆 方法区 虚拟机栈 本地 ...

  9. 2 Servlet 细节

    1 Servlet 配置详解 ①  由于客户端在浏览器只能通过URL访问web服务器的资源,所以Servlet程序若想被外界访问,必须把Servlet 程序映射到一个URL 地址上,这个工作在项目we ...

  10. operator new和operator delete

    从STL源码剖析中看到了operator new的使用 template<class T> inline void _deallocate(T* buffer) { ::operator ...