Question

通常情况下，我希望这会实时更新，但似乎并没有这样做。在我的角度应用程序中，我有一个存储字符串的数组和另一个数组：

var myArray= [{id:"name1",array:{"id1", "id2"}]

然后在我的html中，我有一个表格，列出了myArray中的所有项目

<table *ngFor="item in myArray">
   <td>{{item.id}}</td>
   <td>{{item.array}}</td>
</table>

array中的项目添加到绑定按钮的功能中。因此，用户将从项目列表中进行选择，单击按钮，这些选项将被推送到array。他们也可以返回并删除其中的一些项目，因此我添加代码来处理myArray中每个项目的检查，如果其array包含已删除的项目，它将会删除它。

for(let i=0; i<myArray.length;i++) {
  let row:any = myArray[i];
  for(let k=0; k<row.array.length;k++) {
    if(row.array[k] == deletedItem) {
      row.array.splice(index, 1);
    }
  }
}

代码有效，使用控制台日志我可以看到deletedItem已从myArray的{{1}}中的任何项目中删除（抱歉令人困惑的变量名称！）。但是，即使在提交或打印到控制台时array显示更新的值，该表也不会反映更新的值。我需要刷新桌子吗？我认为它应该自动更新，因为绑定了数据。

Answer 1

从这段代码中，我认为你不是从myArray中删除任何元素，而是从局部变量行中删除。这就是为什么在你的模板中，你没有看到任何变化。

试试这个：

for(let i=0; i<myArray.length;i++) {
  let row:any = myArray[i];
  for(let k=0; k<row.array.length;k++) {
    if(row.array[k] == deletedItem) {
      myArray[i].array.splice(k, 1);
    }
  }
}

Answer 2

我今天遇到了同样的问题，几乎想把头发弄破。就像您一样，我的console.log看起来不错，但是即使绑定了我的数据也没有更新。它不会更新的原因是数据源是不可变的，唯一的更新方法是将已拼接的ArrayList分配给新数组，然后将其分配给数据源。

我要使用的数据来自https://material.angular.io/components/table/overview，这是他们的财产，而不是我的财产。

EX：

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

this.dataSource = ELEMENT_DATA;


remove(){

        //this is where I splice

        this.dataSource.splice(1,1);

        //this is where I assign it to the new array.

        const ELEMENT_DATAS: PeriodicElements[]=[...this.dataSource];

        //this sets the new array to the data source updating it and updating the 
          table on the UI

        this.dataSource = ELEMENT_DATAS;


    }

Angular 2 - 数据更改后更新* ngFor表

2 个答案: