Updating an array in angular 4 after adding an element with splice?

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

Continue reading...