具有动态变量的 ngModel答案

【问题标题】：ngModel with dynamic variable具有动态变量的 ngModel
【发布时间】：2017-11-10 10:48:11
【问题描述】：

当我使用ngModel 发出值以从bumpDetail.name 数组获取属性的凹凸对象时遇到一些问题。

我在下面粘贴了我的代码 sn-p。
谁能帮我检查一下并告诉我哪里做错了？谢谢。

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

这是错误。

解析器错误：在 ng:///AppModule/SettingComponent.html@129:59 ("p * ngFor="让bumpDetail的bumpDetail">

【问题讨论】：

预期的行为是什么？什么不起作用？您收到错误消息吗？哪些部分是可变的，它可以包含哪些值？
我编辑了我的帖子。你能帮我检查一下吗？

标签： angular typescript ngmodel

【解决方案1】：

[] 和 {{}}从不一起使用。一个或另一个

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

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

【讨论】：

【解决方案2】：

[(ngModel)]={{bumpDetail.name}}有错误

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

在使用 [(ngModel)] 或任何其他 ng-directive 时，您不需要 {{}}。

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

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

【讨论】：

您是否遇到同样的错误？还是其他错误？
问题依然存在。

【解决方案3】：

首先了解基础知识 {{}} 是一个表达式，[(ngModel)] 用于两种方式绑定，其中 () 发出，[] 用于绑定。您需要做的就像 [(ngModel)]="bumpDetail.name" 和 if你想打印它，那么你需要使用像{{bumpDetail.name}}这样的表达式。你不能像上面那样同时使用它们。

【讨论】：

对不起，我编辑了我的帖子。我想使用 ngModel 发出值以从 bumpDetail.name 数组中获取属性来凹凸对象。