Question

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

app组件从服务加载数据

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);
}

Answer 1

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

在您的情况下，我会做类似的事情：

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

Angular 2：查看未在阵列推送时更新

1 个答案: