在添加带有拼接的元素后更新 angular 4 中的数组？

Question

I have a list in Angular displayed in table, I want to add an element in specific position. I used

array.splice(index,0,element);             

In the console everything is fine, the element is added at the correct position, but in HTML the table is not updated, the new element element is displayed in the position index and index+1 ( the old value of the position index+1 does not appear)

here is the function :

  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);
        });
}

these solutions give me the result in the picture, the new element is displayed in the second and third position

PS: when I use push it works fine, but I have to add it in a specific index

Answer 1

I tried the way you mentioned and it seems to be working fine(refer the demo below). The issue seems to be with the data you are receiving.

.ts file

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

.html file

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

You can check the working example here demo

Answer 2

Splicing an element into the array does not change the Object reference hence not picked by change detection. You need a way to trigger change detection. Below should work

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

Using spread operator, the above will trigger change detection