Angular 7 ngFor不更新绑定属性答案

【问题标题】：Angular 7 ngFor Not Updating Bound AttributesAngular 7 ngFor不更新绑定属性
【发布时间】：2019-11-01 16:11:41
【问题描述】：

我有 3 个不同的数组，每个数组都有不同的长度，每个数组都使用 ngFor 以可视方式显示。它们看起来像这样：

let list = [ {key:value},{key:value},{key:value},... ]

在我的代码过程中，我根据用户输入重新排序并插入这些数组。我使用 data-index 属性跟踪用户输入。基本上，如果你拖动一个元素，我会抓取 data-index 属性，它告诉我需要移动数组中的哪个元素，当你放下它时，我会读取底层元素的 data-index 属性以知道在哪里插入它。问题是在我对数组进行修改后，数据属性永远不会更新。这给我带来了一个问题，因为现在我的属性不再代表它在数组中的位置。

这是我的模板代码：

  <div *ngFor="let item of list;let i = index;" [attr.data-index]="i">
    <div>....</div>
  </div>

这是我操作列表的代码

this.list.splice(item.insertIndex, 0, item);

在这个拼接命令之后，我希望将更改推送到 ngFor，并且我的所有数据索引属性都将被重置；这意味着我总是希望它们是 1,2,3,4 等，我得到的是 1,4,2,17,3,1,4。

这是预期的行为吗？如果是这样，有没有办法强制刷新，还是我需要遍历每个数组并手动设置 data-index 属性？

【问题讨论】：

标签： angular typescript angular7

【解决方案1】：

如Why is not updated model in ngFor after changed model? 所述，只需重新分配您的变量。

 this.list = [...this.list]

要强制刷新DOM，请参考How to force a component's re-rendering in Angular 2?

【讨论】：

这是否比我自己循环遍历数组并手动更新属性更好/更快的性能？
问题是，“如果仅更改了数组的内容，Angular 就不会将数组识别为已更改。要让它知道数组已更改，只需在删除元素后重新分配数组对象并它应该在 DOM 上更新：" 所以你真的需要通过解构数组本身来重新签名。 stackoverflow.com/questions/47693951/…
所以在这种情况下我需要克隆 from 数组和 to 数组正确吗？
不知道你说的克隆是什么意思。我对您的问题的直接解决方法是this.list.splice(item.insertIndex, 0, item); this.list = [...this.list];。通过这样做，angular 将能够识别数组“列表”已更新。