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. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  2. Js随机数--网页版的体育彩票选号器

    <script> function Quickpick() { var ball for( ball = 0; ball < 5; ball++) { this[ball] = pa ...

  3. launchpad bzr

    在lp注册 一个   lp ID,  比如 alangwansui 然后添加 SSH keys.为自己的管理添加权限. 注册一个项目的 比如  melody. 然后就可以开始使用bzr 在这个项目下建 ...

  4. “layout_”下划线开头的属性

    观看幕课网的视频的收获 “layout_”下划线开头的属性都是交给父容器去处理的属性,如: android:layout_width="match_parent" android: ...

  5. string.Format 日期格式化

    String.Format日期的格式化例子: DateTime dt = DateTime.Now;//2010年10月4日 17点05分 string str = ""; //s ...

  6. 转:Gulp使用指南

    原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...

  7. BZOJ 1023 仙人掌图

    Description 如果某个无向连通图的任意一条边至多只出现在一条简单回路(simple cycle)里,我们就称这张图为仙人图(cactus).所谓简单回路就是指在图上不重复经过任何一个顶点的回 ...

  8. java打jar包 命令行cmd在当前路径打jar包

    不尝试就永远不会知道真相. 今天搞webservice,需要将服务单独拉出来发布.打jar包的时候要打成aar包,所以用到cmd下的打jar包的命令. 当前路径打jar包,一定要先进到这个文件夹,然后 ...

  9. 想做Android Wear开发?你得先搞明白这四件事

    手环和手表的腕上穿戴之争,随着Apple Watch发布和Android Wear不断完善而告一段落.尽管续航上略有缺陷,但手表以其类似手机可扩展的生态环境赢得了众多巨头的支持. Google曾透露, ...

  10. phpMyAdmin <= 4.0.4.1 import.php GLOBALS变量注入漏洞

    漏洞版本: phpMyAdmin <= 4.0.4.1 漏洞描述: CVE(CAN) ID: CVE-2013-4729 phpmyadmin是MySQL数据库的在线管理工具,主要功能包括在线创 ...