Explaining how Pipes only change by default when your Pipe input parameters change and not when your data changes. It also shows you how to make an “unpure” pipe if you always want your pipe to update.

import {Pipe} from 'angular2/angular2';

@Pipe({
name: 'startsWith'
}) export class StartsWith{ transform(value, [field, letter]){
return value.filter((item) => {
return item[field].startsWith(letter);
})
}
}

Current Pipe only watch for [field, letter] changes, not value changes.

The way to tell pipe also watch for value changes is just add 'pure: false':

import {Pipe} from 'angular2/angular2';

@Pipe({
name: 'startsWith',
pure: false
}) export class StartsWith{ transform(value, [field, letter]){
return value.filter((item) => {
return item[field].startsWith(letter);
})
}
}

[Angular 2] Pipe Purity的更多相关文章

  1. [Angular] Using Pipe for function memoization

    Sometimes we might have some expensive function to calcuate state directly from template: <div cl ...

  2. [Angular 2] Understanding Pure & Impure pipe

    First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase ...

  3. [Angular] Increasing Performance by using Pipe

    For example you make a function to get rating; getRating(score: number): string { let rating: string ...

  4. [Angular Unit Testing] Testing Pipe

    import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filesize' }) export class FileSi ...

  5. [Angular] Create a custom pipe

    For example we want to create a pipe, to tranform byte to Mb. We using it in html like: <div> ...

  6. angular和ionic4对过滤器pipe的使用

    以下为自定义过滤器 import { Pipe, PipeTransform, Injectable } from '@angular/core'; import { DomSanitizer} fr ...

  7. Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe

    背景 最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML 对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑. 对 ...

  8. 再遇angular(angular4项目实战指南)

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

  9. angular学习第1步

    #### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...

随机推荐

  1. MySQL 5.6 for Windows 解压缩版配置安装(转)

    转自:http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给 ...

  2. CentOS 6.5 IP 设置

    DEVICE=eth0TYPE=EthernetUUID=7d6d54e0-054d-472b-8cc1-080f16ef36c1ONBOOT=yesNM_CONTROLLED=yesBOOTPROT ...

  3. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  4. PHP数据库

    目录 1.创建数据库连接 2.创建数据库 3.选择数据库 4.设置当前连接使用的字符编码 5.创建表 6.插入数据 7.取得数据查询结果 8.关闭连接 1.创建数据库连接 //mysql_connec ...

  5. VLC命令参数(转载)

    转载自: http://blog.csdn.net/bytxl/article/details/6613449 http://www.cnblogs.com/MikeZhang/archive/201 ...

  6. JS 返回上一步(退回上一步上一个网页)

    链接式: <a href="JavaScript:history.go(-1)">返回上一步</a> <a href="<%=Requ ...

  7. 实用的透明背景mark图标

  8. Why your Games are Unfinished, and What To Do About It (转)

    So, you've got a new game idea, and it's going to change what everyone knows about the genre! Great! ...

  9. uboot的devices_init函数分析

    一.函数说明 函数功能: 完成设备的初始化 函数位置: common/devices.c 二.程序分析 int devices_init (void) { #ifndef CONFIG_ARM /* ...

  10. NSValue NSNumber NSData类

    NSValue NSNumber NSData类 步骤1 NSValue 我们先看看NSValue能做什么: 一个NSValue对象是用来存储一个C或者Objective-C数据的简单容器.它可以保存 ...