Angular 7 ngFor 不更新绑定(bind)属性

Question

我有 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);

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

这是预期的行为吗？如果是这样，有没有办法强制刷新，或者我是否需要循环遍历每个数组并手动设置数据索引属性？

Answer 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?