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. javascript——操作符(~、&、|、^、<<、>>)

    直接上代码吧! <script type="text/javascript"> //javascript操作符 //1.按位非~ var num1=25;// var ...

  2. Android 学习手札(备注)

    1.在Android 应用程序中不能使用System.out.println(..)来输出信息,而要使用Log类中的静态方法输出调试信息. Log.d("onStart", &qu ...

  3. H5相关

    对于容器元素,尤其在做移动端产品时候,我们很自然会让其居中定位: .container { position: absolute; left: %; top: %; transform: transl ...

  4. Array.prototype.map()

    mdn上解释的特别详细 概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 语法 array.map(callback[, thisArg]) 参数 callb ...

  5. js获取返回首页

    <script>setTimeout(function(){    window.location.href="http://"+window.location.hos ...

  6. C、C++、Java异或运算交换变量变量值的区别

    今天看到一位大神的博客,深受感触.决定也发一篇博客,证明一下我还活着. 于是我翻看以前学习时做的一些笔记,整理了一下,得到了一个关于异或运算交换变量变量值的笔记. 首先来看下面三组表达式,看起来他们都 ...

  7. php判断手机移动设备访问

    <?php function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROF ...

  8. Unity问答——怎么知道屏幕中目前有多少个敌人?

    这篇博客源自我在泰课在线的回答.链接:http://www.taikr.com/group/1/thread/92 问:怎么知道屏幕中目前有多少个敌人? 答: 思路一:仅适用于2D游戏,因为这个方法没 ...

  9. VS快捷键和技巧

    1. 怎样调整代码排版的格式? 选择:编辑->高级->设置文档的格式或编辑->高级->设置选中代码的格式. 格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+ ...

  10. [HDOJ 5155] Harry And Magic Box

    题目链接:HDOJ - 5155 题目大意 有一个 n * m 的棋盘,已知每行每列都至少有一个棋子,求可能有多少种不同的棋子分布情况.答案对一个大素数取模. 题目分析 算法1: 使用容斥原理与递推. ...