ngModel with dynamic variable

Question

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 1

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

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

{{}} is for string interpolation only.

Answer 2

There is an error in [(ngModel)]={{bumpDetail.name}}

It should be: [(ngModel)]="bumpDetail.status"

You don't need {{}} when using [(ngModel)] or any other ng-directive for that matter.

Secondly i think there might be something wrong here <p *ngFor="let bumpDetail of bumpDetail"> verify that the name of your variable is correct, and these 2 can't be the same.

I would change it to this: <p *ngFor="let bumpDetail of bumpDetailArray"> where bumpDetailArray is the array