Angular 5对可变对象的更改检测答案

【问题标题】：Angular 5 change detection on mutable objectsAngular 5对可变对象的更改检测
【发布时间】：2018-07-04 21:39:45
【问题描述】：

我知道这是一个常见问题，但这与 Angular 5 更相关。据我记得这曾经在 Angular 2 中工作，除非我指定

changeDetection: ChangeDetectionStrategy.OnPush

代码：

  addFruit(food) {
    // this is not working
    this.fruits.push(food);

    // this works
    // this.fruits = [...this.fruits, food];
  }

在 Angular 5+ 中是否发生了一些变化，第一种方法不再有效？

【问题讨论】：

标签： angular

【解决方案1】：

这是因为您使用{{ }} 在视图中显示数组。 Angular 正在检查 fruits object 中的更改。当您推送到数组时，引用是相同的，但在另一种方法中，您更改了引用，因此它是一个新对象。在视图中试试这个：

<p *ngFor='let fruit of fruits'>{{ fruit }}</p>

或者你可以像这样使用json pipe：

{{ fruits | json }}

【讨论】：