如何将数据绑定到Angular 2中的数组？

Question

我正在试图弄清楚如何将数据绑定到Angular 2中的数组，以便反映更改。我有一个带有数组属性

的样本待办事项应用程序

get tasks(): TaskItem[] {
    return this.taskdb.tasks;
}

我想更新效率，所以我设置 changeDetection：ChangeDetectionStrategy.OnPush 当用户添加任务时，我使用array.push来更新底层数据。

add(task: TaskItem) {
    this.tasks.push(task);
}

问题是因为数组是相同的引用（我不希望在每次更新时克隆并创建一个新数组），并且组件的输入没有改变，UI不会更新以反映改变。

有没有办法让Angular 2在阵列更新时更新UI，但没有多余的检查？

Answer 1

ChangeDetection.OnPush期望你的数据是不可变的或可观察的 - array.push与它无关（那里有一个令人困惑的名字，我同意）

更改数组引用似乎效率较低（就纯内存而言，它是......），但它启用的是不可变的绑定检查，这样更有效。

所以this.tasks = this.tasks.concat([newTask]);会使这项工作成功。否则，您需要使用常规更改检测机制。

Answer 2

使用 changeDetection：ChangeDetectionStrategy.OnPush 需要传递一个全新的数据输入引用。

所以，而不是

this.tasks.push(task);

使用以下

this.tasks = [...this.tasks, task];

通过这种变化，它不再改变任务数组，而是返回一个全新的数组。这些变化后，事情将再次开始工作！