Issue
I’d like to use two way data binding inside a template but I always get this message:
Error: Cannot assign to a reference or variable!
Here is a model and an ngFor:
class Entity {
List<String> stringList;
}
<div *ngFor="let stringItem of entity.stringList">
<material-input [(ngModel)]="stringItem"></material-input>
</div>
The () around ngModel casues the error.
It is compiling when I use only [ngModel], but this doesn’t write back ‘item’ changes into the entity object.
Solution
In this case you want to use the indexing feature:
https://webdev.dartlang.org/angular/guide/structural-directives#inside-ngfor
to have something like:
<div *ngFor="let stringItem of entity.stringList; let i=index">
<material-input [(ngModel)]="entity.stringList[i]"></material-input>
</div>
Answered By – rkj
Answer Checked By – Senaida (FlutterFixes Volunteer)