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. 用arm-linux-gcc v4.3.4交叉编译Qt4.8.3

    1.解压缩 #tar zxvf  qt-everywhere-opensource-src-4.8.3.tar.gz 2. configure #mkdir buildarm-static #cd b ...

  2. jQuery 元素移除empty() remove()与detach()的区别?

    @1.empty() 删除匹配元素集合中所有的后代字节点元素: <p>hello<span>world</span></p> $("p&quo ...

  3. PHP面向对象(OOP):PHP5接口技术(interface)

    PHP与大多数面向对象编程语言一样,不支持多重继承.也就是说每个类只能继承一个父类.为了解决这个问题,PHP引入了接口,接口的思想是指定了一个实现了该接口的类必须实现的一系列方法.接口是一种特殊的抽象 ...

  4. delphi 2010 动态链接库DLL断点调试

    DELPHI 2010 动态链接库DLL断点调试 马根峰 (广东联合电子服务股份有限公司,广州 510300) 摘要:本文详细介绍了Delphi 2010中的动态链接库DLL断点调试技术 关键词:DE ...

  5. function field , store={}...

    def _get_product_state(self,cr,uid,ids,fields,arg=None,context=None): res={} dic=dict( self.pool.get ...

  6. windows7任务栏上的图标修复

    Technorati 标记: 疑难杂症   今天,我在使用Windows 7的时候,因为操作一些系统文件,发现桌面下角的个别正在运行的图标不见了,但是,我们如果再打开一个新程序,又会提醒你已经在运行了 ...

  7. uboot总结:uboot配置和启动过程3(config.mk分析)

    说明:文件位置:在uboot的目录下,文件名为:config.mk.是一个makefile文件,以后会被主Makefile调用. 它的主要作用的是: (1)具体的设置交叉编译工具链接(主Makefil ...

  8. E: Some packages could not be authenticated

    问题:          在Ubuntu上,安装软件时出现了“E: Some packages could not be authenticated”错误. 原因:     表示系统无法验证这个软件包 ...

  9. BZOJ 1005 明明的烦恼

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 ...

  10. Truck History

    poj1789:http://poj.org/problem?id=1789 题意大概是这样的:用一个7位的string代表一个编号,两个编号之间的distance代表这两个编号之间不同字母的个数.一 ...