在Angular 2的单选按钮列表中，模型无法更新

Question

我正在尝试构建一个Angular 2组件，用于显示带有单选框的选项列表。它可以正常工作，但是组件中绑定在[(ng-model)]="answer"内的answer字段在选择其中一个选项时不会更新。我做错了什么或者这不是创建单选框选择选项列表的方式吗？

  <div>
    Answer: {{ answer }}
  </div>
  <div class="radio" *ng-for="#option of itemData">
      <label>
          <input type="radio" [value]="option.id" [(ng-model)]="answer"
                 (change)="responseChanged()" name="radio-list">
          <span>{{ option.name }}</span>
      </label>
  </div>

Plunker

- lucassp

---

这里有一个自定义实现的单选框，但是不知道列表怎么样。 - Eric Martinez

Answer 1

现在双向绑定已经可以与单选框一起使用了，因此您不能使用[(ng-model)]。

替代方法是使用change事件和checked属性。请参见我的plunker示例：

https://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview

(change)="answer=$event.target.value"

以及

[checked]='answer==option.id'

- Chandermani

---

我也是这样假设的 :) 不知道是否有一种方法可以使用组件内的控件类来构建这种类型的单选列表。 - lucassp

看起来还有其他与属性绑定到视图有关的问题：setAnswer(e) { this.items[e.index].answer = e.answer; // e.answer = "b" console.log(this.items[e.index]); // 对象的 "answer" 字段是未定义的 } - lucassp

好的，属性绑定，[item-data]='item'，将引用发送到组件树下面，其中'answer'通过[(ng-model)]设置为空字符串，这就是使得顶层组件的setAnswer处理程序在上面一行更新后显示答案字段为未定义的原因。 - lucassp

使用Beta 16，这个解决方案仍然有效。谢谢！ - tctc91

Answer 2

在Angular1中，您不能像使用ng-model那样使用单选框。但是，在GitHub上有几个组件可以轻松地实现此功能，例如ng2-radio-group组件。它支持单选和多选框选择。

<radio-group [(ngModel)]="sortBy">
    <input type="radio" value="rating"> Rating<br/>
    <input type="radio" value="date"> Date<br/>
    <input type="radio" value="watches"> Watch count<br/>
    <input type="radio" value="comments"> Comment count<br/>
</radio-group>


<checkbox-group [(ngModel)]="orderBy">
    <input type="checkbox" value="rating"> Rating<br/>
    <input type="checkbox" value="date"> Date<br/>
    <input type="checkbox" value="watches"> Watch count<br/>
    <input type="checkbox" value="comments"> Comment count<br/>
</checkbox-group>

- pleerock