ngModel with dynamic variable

Tri Nguyen picture Tri Nguyen · Nov 10, 2017 · Viewed 9.3k times · Source

I am facing some problem when use ngModel to emit value to bump object with property get from bumpDetail.name array.

I have pasted my code snippet down below.
Could anyone please help me by checking it and tell me where I have done wrong? Thank you.

<p *ngFor="let bumpDetail of bumpDetail">
    <input type="checkbox" id="device" [(ngModel)]={{bump.bumpDetail.name}}/>
    <label for="device">{{bumpDetail.name}}</label>
</p>
 Bump[] = [{
"name": "bump_1",
"status": true
}, {
"name": "bump_2",
"status": false
 }, {
"name": "bump_3",
"status": true
}]

This is error.

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{bumpDetail.name}}] in ng:///AppModule/SettingComponent.html@129:59 ("p *ngFor="let bumpDetail of bumpDetail">

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Nov 10, 2017

[] and {{}} are never used together. Either one or the other

[(ngModel)]="this[bumpDetail.name]"

{{}} is for string interpolation only.