使用嵌套的 ngFor 重复复选框输入答案

【问题标题】：Repeating checkbox input with nested ngFor使用嵌套的 ngFor 重复复选框输入
【发布时间】：2017-01-06 01:44:54
【问题描述】：

我正在尝试重复一个嵌套对象，并且我有一个值为 true 或 false 的复选框。

这是我的代码：

<accordion-group
    *ngFor='let brand of products'>
    <div *ngFor='let product of brand.products'>
        <div>
           <input type="checkbox" id="{{product.name}}" ngControl="{{product}}" ([ngModel])="product.checked">
             <label
                attr.for="{{product.name}}"
                id="{{product.description}}"
                class="{{product.description}}"
                (click)="onCheck(model)">
             </label>
          </div>
        </p>
      </div>
    </accordion-group>

Plunker：http://plnkr.co/edit/IItxHiXkpocUjLG6NhMy?p=preview - 看到复选框不会检查数量值何时更新。我无法让 ngModel 正常工作。

【问题讨论】：

为复选框添加名称属性。如果他们应该属于同一个组，他们应该有相同的名字。此外，如果您添加此代码的小提琴，您可以使这个问题更清楚，这样我们就可以更好地理解问题，查看代码运行和失败。

标签： angular

【解决方案1】：

根据angular2 RC.5，ngControl 应该是fromControlName
([ngModel]) 应该是 [(ngModel)] 或用作不同的 [ngModel] 和 (ngModel) 。
最好使用property Binding using [ ]，同时动态绑定 id ，name 等，就像你的情况一样使用

使用[id]="product?.name" 而不是id="{{product.name}}"

使用[attr.for]="product?.name" 而不是attr.for="{{product.name}}"

似乎一切都很好，如果仍然有同样的问题，请在 plunker 上重现您的问题并将其发布。

【讨论】：

查看链接到已编辑问题的 plunker。我需要复选框来检查数量何时更新，但它不起作用。 ngModel 没有按应有的方式绑定
你是对的。我让我的笨蛋开始工作了。现在我只需要弄清楚为什么它在我的应用程序中不起作用。谢谢！

【解决方案2】：

这是无效的

([ngModel])

应该是

[(ngModel)]

这叫做“香蕉盒”，而不是“香蕉盒”；-)

【讨论】：

但是你看到它很有帮助：D
是的，毫无疑问：p

【解决方案3】：

[(ngModel)]="product.checked";

100% 在角度 2 中工作

【讨论】：