Angular 2：视图不更新数组推送答案

【问题标题】：Angular 2: View not updating on array pushAngular 2：视图不更新数组推送
【发布时间】：2017-06-08 09:13:22
【问题描述】：

我有两个子组件。他们正在共享我使用 http.get/subscribe 方法加载的 json 文件中的数据。出于某种原因，当我将数据推送到数组中时，它不会在视图中更新。它会在控制台中显示更新后的数组。

从服务加载数据的应用组件

this.dataService.getData()
 .subscribe(
     data => {
       this.data = data;
     },
     (err) => console.log('Error: ', err),
     () => console.log("success!")
   );

我正在使用输入来访问我的子组件中的数据。当新值被推入数组时，Angular 2 中有什么方法可以更新视图。

显示组件

<div *ngFor="let i of items; let k = index"><h1>{{i.title}}</h1> <p>{{i.desc}}</p></div>

按钮组件

<button (click)="addItem(i)">Add Item</button>

The Component Function
addItem(i){
  let data = {title: "Some title", desc: "Some desc"};
  this.data.list[i].items.push(data);
}

【问题讨论】：

你能告诉我们组件代码吗？您发布的内容看起来正确；问题可能出在其他地方。
您在使用 OnChanges 生命周期挂钩吗？如果您正在对“数据”的更新做更多的工作，您可能需要调用它:)
@SteveG。我添加了我正在使用的代码。显示数据的显示组件，以及将数据推送到数组中的按钮。
ngFor 迭代 items 而不是 data
Why angular 2 ngOnChanges not responding to input array push的可能重复

标签： javascript arrays angular typescript

【解决方案1】：

我有同样的问题，我通过使用扩展运算符创建对象的新数组而不是将新元素推送到现有数组中解决了这个问题。

在你的情况下，我会做这样的事情：

addItem(i){
  let data = {title: "Some title", desc: "Some desc"};
  this.data.list[i].items = [...this.data.list[i].items, data];
}

【讨论】：

这不就是“concat”的意思吗？