Ng-reflect-model shows the correct value but does not reflect the input

Question

A very strange problem was discovered when my application does not work correctly in the specific case of the user. I have a portal where users can add questions and answers and then edit them. In this case, when I delete the set (q + a) and then try to add it, the model is updated, but my opinion takes values ​​from the placeholders and the updates themselves. Here I just spliced ​​and clicked the values ​​in an array and rendered using ngFor. The last element is a mannequin and is used to enter values ​​that are pushed up.

Attaching a screenshot, if that makes sense.

You can see that for the text field, the ng-reflect model displays the correct question, but the element itself displays the placeholder text.

Answer 1

Apparently, the problem is caused by the fact that Angular was not able to properly track the elements of my array. I found it very hard. So just adding the trackBy attribute to my ngFor, I was able to solve this problem.

Added this to my component:

customTrackBy(index: number, obj: any): any { return index; } 

and then in the template:

 <div class="margin-bottom-15" *ngFor="let assessment of language.assessments; trackBy:customTrackBy"> 

So basically I ask Angular to keep track of my elements in the array by index. He solved the problem.

Here assessment is a model for each set of questions.