可变对象的角度5变化检测

Question

我知道这是一个经常出现的问题，但这与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+中有没有改变，第一种方法不再有效？

工作示例：https://stackblitz.com/edit/angular-ch-detec?file=app%2Fapp.component.ts

Answer 1

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

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

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

{{ fruits | json }}