时间戳

首页 > 解决方案 > Angular 7 ngFor不更新绑定属性

angular - Angular 7 ngFor不更新绑定属性

问题描述

我有 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 属性？

标签： angulartypescriptangular7

解决方案

如此处所述，为什么在更改模型后未在 ngFor 中更新模型？，只需重新分配您的变量。

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

要强制 DOM 刷新，请参阅如何在 Angular 2 中强制组件重新渲染？

推荐阅读