1

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)

enter image description here

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

Improve this question
3
  • 1
    can you share the content of .ts file Commented Nov 10, 2020 at 9:54
  • i edited the post , there is the function i used Commented Nov 10, 2020 at 10:00
  • can you please share all the relevant code (ts, html), not only the function? Commented Nov 10, 2020 at 15:48

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this solution return an empty array
@Gharbi check the demo, i tried the way you mentioned and it seems to be working
0

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

Improve this answer

6 Comments

it still give me same result
No, in the console, the array is sorted as I want
as @HimanshuSingh stated, I also have been unable to reproduce the issue, The code has just worked stackblitz.com/edit/angular-ivy-7ntydr
Thank you before, in the html i am using the index of each line ( <tr *ngFor="let pieces of detailsPieces ; let i=index"> ), it can causes the problem ?
I don't think it can unless you pass i to the addLineModified(id) function
|
0

I'm experiencing the exact same issue in Angular 18. I modified the Stackblitz by Owen Kelvin to replicate this issue. Note that wrapping it in form tags is what causes the issue. If you take away the form tags it works as expected. I'm pretty sure it has to do with how the name attribute is used when inside a form, even though I'm making the name attribute unique. It's like it doesn't update that property after rebinding data. https://stackblitz.com/edit/angular-ivy-jp3hur1k

Improve this answer

1 Comment

what should the reader do with this information? do you have any suggestions?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.