带有动态变量的 ngModel

Question

我在使用 ngModel 发射值以通过属性从 bumpDetail.name 数组获取碰撞对象时遇到一些问题。

我已经在下面粘贴了我的代码片段。
谁能帮我检查一下，告诉我哪里做错了？谢谢。

<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
}]

这是错误。

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

[] 和 {{}} 从未一起使用。非此即彼

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

{{}} 仅用于字符串插值。

Answer 2

[(ngModel)]={{bumpDetail.name}}

中有错误

应该是：[(ngModel)]="bumpDetail.status"

在使用 [(ngModel)] 或任何其他 ng 指令时不需要 {{}}。

其次，我认为这里可能有问题<p *ngFor="let bumpDetail of bumpDetail">请确认您的变量名称是否正确，并且这两个不能相同。

我会将其更改为：<p *ngFor="let bumpDetail of bumpDetailArray"> 其中 bumpDetailArray 是数组

Answer 3

先做好基础知识 {{}} 是一个表达式，[(ngModel)] 用于双向绑定，其中 () 正在发射，[] 用于 binding.What 你需要做的就像 [(ngModel)]="bumpDetail.name"，如果你想打印它，那么你需要使用像 {{bumpDetail.name}} 这样的表达式。您不能像上面那样同时使用它们。

带有动态变量的 ngModel

ngModel with dynamic variable

typescript

ngmodel

angular