使用 splice 添加元素后更新角度 4 中的数组？

Question

我在表格中显示了一个 Angular 列表，我想在特定位置添加一个元素。 我用过

array.splice(index,0,element);             

在控制台中一切都很好，元素被添加到正确的位置，但在 HTML 中，表格没有更新，新元素

element

显示在位置

index

和

index+1

（旧值）位置

index+1

不出现）

这是函数：

  addLineModified(id) {
    let index = this.detailsPieces.findIndex((x) => x.id === id);
    this.detailsPiecesService
        .getDetailsPieceBylineModified(this.quotation.id, id)
        .subscribe((element: DetailsPieces) => {
            this.detailsPieces.splice(index, 0, element);
        });
}

这些解决方案给了我图中的结果， 新元素显示在第二个和第三个位置

PS：当我使用推送时它工作正常，但我必须将其添加到特定索引中

Answer 1

我尝试了你提到的方法，它似乎工作正常（参考下面的演示）。问题似乎出在您收到的数据上。

.ts 文件

  export class AppComponent {
  arr = [1, 2, 3];
  val = 999;
  clickHandler() {
    this.arr.splice(1, 0, this.val);
    this.val -= 1;
  }
}

.html 文件

<table >
  <tr>
    <th>Index</th>
  </tr>
  <tr *ngFor="let index of arr"><td>{{index}}</td></tr>
</table>

<button (click)="clickHandler()">add at index 2</button>

您可以在此处查看工作示例demo

Answer 2

将元素拼接到数组中不会更改对象引用，因此不会被更改检测选中。您需要一种方法来触发更改检测。下面应该可以工作

   this.detailsPieces.splice(index, 0, element);
   this.detailsPieces = [...this.detailsPieces]

使用展开运算符，以上将触发变化检测

Answer 3

我在 Angular 18 中遇到了完全相同的问题。我修改了 @Owen Kelvin 的 Stackblitz 来复制这个问题。 请注意，将其包装在表单标签中是导致问题的原因。 如果你去掉表单标签，它就会按预期工作。 https://angular-ivy-jp3hur1k.stackblitz.io