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">

Solution 1

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

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

{{}} is for string interpolation only.

Solution 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

Comments

[Günter Zöchbauer]

What is the expected behavior? What doesn't work? Do you get an error message? What part is variable and what values can it contain?

[Tri Nguyen]

Sorry, i had edit my post. I want to use ngModel to emit value to bump object with property get from bumpDetail.name array.

[Venomy]

Are you getting the same error? or different error?

[Tri Nguyen]

Problem still occur.