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. OA系统权限管理设计方案学习

    学习之:http://www.cnblogs.com/kivenhou/archive/2009/10/19/1586106.html 此为模型图: 据此写了sql语句: drop table if ...

  2. CentOS 6.5 IP 设置

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

  3. C++ 类的前向声明

    前向声明 在计算机程序设计中, 前向声明是指声明标识符(表示编程的实体,如数据类型.变量.函数)时还没有给出完整的定义.即可以声明一个类而不定义它,只声明类但不知道类的成员变量.函数等具体细节. 如: ...

  4. github 分支 合并

    Git如何进行分支管理?      1.创建分支      创建分支很简单:git branch <分支名>      2.切换分支      git checkout <分支名&g ...

  5. yii框架的foreach 已经优化好了,可以“$user_model->attributes=$_POST['Admin'];”

    yii框架的foreach 已经优化好了, 以前我们遍历数组的时候是用foreach循环 foreach ( as $key=>$value){                    $user ...

  6. 03:计算(a+b)/c的值

    总时间限制:  1000ms 内存限制:  65536kB 描述 给定3个整数a.b.c,计算表达式(a+b)/c的值,/是整除运算. 输入 输入仅一行,包括三个整数a.b.c, 数与数之间以一个空格 ...

  7. QLineEdit

    The QLineEdit widget is a one-line text editor. Header: #include <QLineEdit> qmake: QT += widg ...

  8. [BZOJ 1833] [ZJOI2010] count 数字计数 【数位DP】

    题目链接:BZOJ - 1833 题目分析 数位DP .. 用 f[i][j][k] 表示第 i 位是 j 的 i 位数共有多少个数码 k . 然后差分询问...Get()中注意一下,如果固定了第 i ...

  9. Web NFC API

    W3C Editor's Draft 29 December 2014 This version: http://www.w3.org/2012/nfc/web-api/ Latest publish ...

  10. bzoj3208

    乍一看感觉好神,仔细一看数据范围…… 什么水题啊,直接暴力就可以了…… ..,..] of longint;     v:..,..] of boolean;     i,j,k,a1,a2,b1,b ...