Having an ngModel within an ngFor loop:
<div *ngFor="let comment of comments">
<div *ngFor="let answer of toArray(comment.answers); let j = index; trackBy: trackByIndex;">
<textarea id="editAnswer[j]" name="editAnswer[j]" [(ngModel)]="answer.text">
{{ answer.text }}
</div>
</div>
In my component, I have implemented two functions to iterate through indices and convert objects into arrays:
trackByIndex(index: number, obj: any): any {
return index;
}
toArray(answers: object) {
return Object.keys(answers).map(key => ({
key,
...answers[key]
}))
}
The issue arises when the text bound in the textarea is changed, as the ngModel does not reflect these changes.
Here is a Stackblitz example: https://stackblitz.com/edit/angular-z6xatv