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

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? — Günter Zöchbauer, Nov 10 '17 at 10:51

Günter Zöchbauer · Accepted Answer · 2017-11-10T11:01:36.010

14

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

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

{{}} is for string interpolation only.

edited Nov 10 '17 at 11:01

answered Nov 10 '17 at 10:58

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Nov 10 '17 at 11:02

1

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

answered Nov 10 '17 at 11:02

Venomy

2,076
15
25

Are you getting the same error? or different error? – Venomy Nov 10 '17 at 11:07
Problem still occur. – Tri Nguyen Nov 10 '17 at 11:10

score 0 · Answer 3 · answered Nov 10 '17 at 11:03

0

Get the basics right first {{}} is an expression and [(ngModel)] is for two way binding where () is emitting and [] is for binding.What you need to do is like [(ngModel)]="bumpDetail.name" and if you want to print it then you need to use the expression like {{bumpDetail.name}}. You cannot use both of them together like you have used above.

answered Nov 10 '17 at 11:03

Sreekar Sree

404
5
14

Sorry, i had edit my post. I want to use ngModel to emit value to bump object with property get from bumpDetail.name array. – Tri Nguyen Nov 10 '17 at 11:07

ngModel with dynamic variable

3 Answers3