[Angular 2] Using Array ...spread to enforce Pipe immutability-优快云博客

本文介绍如何通过使用不可变状态来确保Angular管道能够正确更新。通过改变引用而非直接修改原有数组的方式，使得管道能够感知到变化并进行更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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];
    }