使用NgFor

Question

我想使用NgFor创建一组单选按钮作为表单的一部分。它们看起来很好但是一旦我得到NgModel它就会中断，所以点击它们中的任何一个总是选择最后一个（除了最后一个选择倒数第二个）。

I have set up a plunk of the issue

如果你从模板中第12行的末尾删除了ngModel，那么一切似乎都能正常工作，但如果没有，我的表格就会死在水中。正确？

任何建议都会很棒。我是表格的新词和NgModel的相对新词。

干杯

Answer 1

绑定到输入时删除attr部分。

由此：

 <input type="radio" name="gameType" [attr.id]="'gameType'+i" [attr.value]="i" ngModel>

对此：

 <input type="radio" name="gameType" [id]="i" [value]="i" ngModel>

以下是修改后的plunker

Answer 2

您可以更改以下内容：

<input type="radio" name="gameType" [attr.id]="'gameType'+i" [attr.value]="i" ([ngModel])="defaultSpecs[i].model">

这将告诉ngModel使用双向绑定（添加了box语法中的banana）并改变你的defaultSpecs对象以包含一个名为model的属性，该属性包含一个boolean，指示它是否被选中。

使用重复索引作为数组引用defaultSpecs对象。