angular - 从服务器获取数据不会触发子组件中的更改检测

Question

我正在开发一些应用程序，其中有一个具有某些属性的对象，并且当我发出 http 请求时，会将新属性添加到该对象中。

    this.user = {
      id: 1,
      name: 'John'
    }

    this.http.get('https://api.chucknorris.io/jokes/random')
      .subscribe(joke => this.user.joke = joke);

问题是发出请求时没有执行更改检测（本文指出，只要我不修改更改检测策略就应该执行它）。

因此，ngOnChanges不会在我传递用户对象的子组件中调用，并且当值从服务器到达时我正在做一些复杂的事情。

我附上了一个简化的stackblitz演示。

注意：我知道当新数据到达时我可以传递该对象的副本，但我认为这应该是一种更好的方法。

Answer 1

除非检测到新的参考，否则不会触发角度变化检测。

如果您使用 self 和 new 属性覆盖现有用户，angular 将检测到新的引用并更新。

 this.http.get('https://api.chucknorris.io/jokes/random')
      .subscribe(joke => this.user = {...this.user, joke};