[Angular 2] Using Array ...spread to enforce Pipe immutability
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的更多相关文章
- [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 ...
- [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 ...
- [Angular Unit Testing] Shallow Pipe Testing
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingMod ...
- Angular 利用 marked.js 添加 Markdown + HTML 同时渲染的 Pipe
背景 最近在公司开发的一个项目需要在 Angular 上展示图文,并且需要同时支持 Markdown 和 HTML 对于同时支持 Markdown 和 HTML ,应该要分为编辑和渲染两部分考虑. 对 ...
- Angular概念纵览
Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...
- Angular表单控件需要类型和实际值类型不一致时实现双向绑定
适用Angular版本为:>=2.本文同样适用于Ionic这类的基于Angular实现的框架. 本文的思路也适用于控件显示的值和实际的值不一样时实现双向绑定. 1. 问题描述 在使用md2的da ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
- AngularJS的核心对象angular上的方法全面解析(AngularJS全局API)
总结一下AngularJS的核心对象angular上的方法,也帮助自己学习一下平时工作中没怎么用到的方法,看能不能提高开发效率.我当前使用的Angularjs版本是1.5.5也是目前最新的稳定版本,不 ...
随机推荐
- Design Pattern ——Builder
一.基础知识:先前学习建造者模式的时候,总是以这个UML图作为学习基础资料 然后总是要记住四个角色 产品类:一般是一个较为复杂的对象,也就是说创建对象的过程比较复杂,一般会有比较多的代码量.在本类图中 ...
- ASP.NET c#学习经验
1.DataGrid自定义字段.<Column <asp:BoundColumn DataField="khbh" HeaderText="客户编号&quo ...
- angularjs中ng-attr的用法
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- 13 hbase连接
Configuration conf=new Configuration(); String zookeeper=""; String clientport="; Str ...
- M_LROOT,LD_LIBRARY_PATH, “Not all extension Dlls were loaded”问题原因及解决方法(持续更新)
最近在需要在云主机上进行压力测试,所以需要Linux的Agent. 一.安装:教程可以百度,大概步骤如下: 1.Upload Linux.zip to 指定的机器 2.解压,chmod 777 $Li ...
- Mysql学习基础语法
-- Mysql 数 据 库 语 法 创建数据库 create database 数据库名; 创建表 ) ); 复制表和数据 create table 复制后新的表名 select * from 旧表 ...
- Selenium2+Python自动化测试实战
本人在网上查找了很多做自动化的教程和实例,偶然的一个机会接触到了selenium,觉得非常好用.后来就在网上查阅各种selenium的教程,但是网上的东西真的是太多了,以至于很多东西参考完后无法系统的 ...
- 数值统计 AC 杭电
数值统计 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- BufferedOutputStream
package file; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStr ...
- C语言+ODBC+SQL 连接
第一步:配置ODBC. ①.在控制面板找到ODBC,或者在控制面板上搜索ODBC.如图: ②.点击ODBC的添加按钮,选择SQL Server,这是会出现创建SQL Server的新数据源的对话框,我 ...