Angular2 - 如何将单选按钮绑定(bind)到 bool 对象属性

Question

我有一个非常简单的模型，如下所示:

export class Answer {

  constructor(public text: string, public isCorrect: boolean = false) {
  }

}

我想将它绑定(bind)到单选按钮，如果单选按钮被选中，isCorrect 属性为 true，否则为 假。解决这个问题的正确方法是什么？

明确地说，我会有一个 Answer 数组，每个 Answer 都有一个单选按钮。

Plnkr Example

到目前为止，我的模板如下所示:

<label *ngFor="let answer of answers">
  <input #rad type="radio" name="answer-{{questionIndex}}" [(ngModel)]="answer.isCorrect" [value]="rad.checked">
  {{answer.text}}
</label>

Answer 1

我遇到了类似的问题。这是一个设计问题。单选按钮旨在允许用户从列表中选择单个值，因此将它们分别绑定(bind)到一个单独的 bool 值与它们的意图不一致。

像您一样，我想使用单选按钮，因为它们具有“单值”特征，而无需执行大量额外的 javascript 工作来在提交表单时将它们的行为强加到我的数据结构上。最终，我解决了这个问题，使用 (change) 事件绑定(bind)在单击单选按钮时相应地更新我的数据结构。

模板:

<input *ngFor='let answer of answers; let a = index' type='radio' name='question.id' 
  (change)='handleRadio(a)>

组件:

handleRadio(answerIndex: number): void {
  this.answers.forEach((answer) => {
    answer.checked = false;
  });
  this.answers[answerIndex].checked = true;
}

请注意，如果您尝试从组件数据重新加载表单，这将会中断 - 在这种情况下，我需要更改我的内部数据结构以反射(reflect)单选按钮。