Pipes need a new reference or else they will not update their output. In this lesson you will use the Array ...spread operator to create new Array to update pipe output without mutation.

Currently on our TodoInput.ts, each time you add a new todo into the list, we can see that the TodoModule get updated, but it not showing in the list, this is because Pipes check the reference, it object reference changes then it will update the Pipe. This is good because it can imrpove the prefermence by saving everytime check whether need to update the pipes.

To make pipe update itself, we need everytime pass in a new reference. So immutable state is required, for example we need to change the current code:

    onSubmit() {
this.todoService.todos.push(this.todoModule);
// After insert, create new TodoModule
this.todoModule = new TodoModule();
console.log(this.todoService.todos);
}

To immutable state:

    onSubmit() {
this.todoService.addNewTodo(this.todoModule);
// After insert, create new TodoModule
this.todoModule = new TodoModule();
console.log(this.todoService.todos);
} //TodoService.ts:
addNewTodo(todo){
this.todos = [...this.todos, todo];
}

-----------------------------------

[Angular 2] Using Array ...spread to enforce Pipe immutability的更多相关文章

  1. [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

    Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...

  2. [Angular 2] Rendering an Observable with the Async Pipe

    Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson cover ...

  3. [Angular Unit Testing] Shallow Pipe Testing

    import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...

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

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

  5. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

  6. Angular表单控件需要类型和实际值类型不一致时实现双向绑定

    适用Angular版本为:>=2.本文同样适用于Ionic这类的基于Angular实现的框架. 本文的思路也适用于控件显示的值和实际的值不一样时实现双向绑定. 1. 问题描述 在使用md2的da ...

  7. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  8. Angular 1 深度解析:脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  9. AngularJS的核心对象angular上的方法全面解析(AngularJS全局API)

    总结一下AngularJS的核心对象angular上的方法,也帮助自己学习一下平时工作中没怎么用到的方法,看能不能提高开发效率.我当前使用的Angularjs版本是1.5.5也是目前最新的稳定版本,不 ...

随机推荐

  1. iOS8中添加的extensions总结(四)——Action扩展

    Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bit ...

  2. Swift中可选型的Optional Chaining 和 Nil-Coalesce(Swift2.1)

    /* 下面是介绍Optional Chaining 和 Nil-Coalesce */ // Optional Chaining (可选链) if let errorMessage = errorMe ...

  3. 武汉科技大学ACM:1007: 不高兴的津津

    Problem Description 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她 报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一 ...

  4. jdk与cglib的动态代理

    JDK动态代理中包含一个类和一个接口: InvocationHandler接口: public interface InvocationHandler { public Object invoke(O ...

  5. DoingOrder.aspx.cs缓存的使用方法

    using System; using System.Web.UI; using System.Data; using System.Text; using BLL = SmartWaterSys.B ...

  6. Linux系统下快速删除某个目录下大量文件

    不管是哪个操作系统,同一级目录存在太多的文件都是一件可怕的事情,不管是读取还是删除的时候. 一旦这种不幸的事情发生在你身上,而又不能完全把整个目录删掉怎么办呢? 你可以用 rm -f *.log 但是 ...

  7. 光盘卡在MacBook里退不出来咋办?

    如果光盘推不出来了怎么办?很多同学想到的是:上针!不过这招对MacBook Pro毫无用处,因为没有给你插针的地方,没有机械按键,只有键盘右上角一个推出的快捷键,不过在光盘卡在光驱里时,按此健基本无效 ...

  8. Spark学习笔记--Graphx

    浅谈Graphx: http://blog.csdn.net/shangwen_/article/details/38645601 Pregel: http://blog.csdn.net/shang ...

  9. iOS开发网络篇—网络请求(HTTP协议)小结

    iOS开发网络篇—网络请求(HTTP协议)小结 iOS开发网络篇—网络请求(HTTP协议)小结 1. 聊一下HTTP协议(协议的完整的通信过程) 2.通信过程 1> 请求 * 客户端 --> ...

  10. codevs 1068 乌龟棋

    题目描述 Description 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一 的起点,第N格是终点,游戏要求玩家控制 ...