Two way data binding inside a template

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)

Leave a Reply

Your email address will not be published. Required fields are marked *