显示从 http 调用 Angular 检索到的更新数据

Posted 2023-03-13

【中文标题】显示从 http 调用 Angular 检索到的更新数据

【英文标题】：Show updated data that has been retrieved from http call Angular

【发布时间】：2020-08-07 12:35:35

【问题描述】：

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

以编程方式将数据正确推送到对象中。我在浏览该方法时看到了这一点，并看到我的 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]);
  

我怀疑这与生命周期挂钩..

【问题讨论】：

这是因为ngOnInit生命周期钩子仅在组件初始化时被调用：angular.io/api/core/OnInit

是的，我怀疑。不确定如何在这种情况下使用 OnChanges。

尝试创建一个 stackblitz 来展示问题（你可以使用 rxjs.of() 来模拟 observables）。

【参考方案1】：

我需要查看更多代码才能确定，但​​您的更改似乎没有反映在模板的呈现中，因为您对“人员”数组的添加不会触发更改检测。

这是因为更改检测器会查找对绑定对象的引用的更改（在本例中，是指向数组的“指针”）。要触发更改检测，您需要更改引用（即创建一个新数组）。

试试这个：

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

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

【讨论】：

不清楚我的 for 循环等如何进入数组的值，你能澄清一下吗？

您的数据已经在任何数组中 - 您正在循环的那个数组。您不需要遍历数组，上面的代码会创建一个新数组，其中包含旧的“人”数组和新数据。

这是一个非常有趣的解决方案，而且效果很好。