显示从http调用Angular中获取的更新数据。

Question

我正在将数据从一个包含嵌套数组的数据响应推送到组件中的静态数据数组中。

在程序上，数据被正确地推送到对象中。当我走过这个方法时，我看到我的for循环成功地将项目添加到已经存在的数组中。这是在'OnInit'添加的

在我的视图中，它根本没有将项目添加到表中。

 ngOnInit(): void {
    this._data.getContacts().subscribe(data => this.addAsyncData(data));
  }

  addAsyncData(result){
    for(let i =0; i < result.length; i++) {
      this.people.push(result[i]);
  }
}

我怀疑这与生命周期挂钩有关。

Answer 1

我需要看到更多的代码来确定，但似乎很可能你的变化没有反映在模板的渲染中，因为你对 "people "数组的添加没有触发变化检测。

这是因为变化检测器会寻找对绑定对象引用的变化（在这种情况下，是对数组的 "指针"）。要触发变化检测，你需要改变引用（即创建一个新的数组）。

试试这个。

addAsyncData(result){
    this.people = [...this.people, ...result];
}

它创建了一个新的数组，包含原始内容和新内容。