Angular2 - 如何将单选按钮绑定到布尔对象属性答案

【问题标题】：Angular2 - How to bind radio buttons to boolean object propertiesAngular2 - 如何将单选按钮绑定到布尔对象属性
【发布时间】：2019-05-04 12:14:08
【问题描述】：

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

export class Answer {

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

}

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

明确地说，我将有一个 Answers 数组，每个 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>

【问题讨论】：

请添加演示您尝试过的代码。
@GünterZöchbauer 模板已添加！
你说的是数组，但我在你问题的代码中看不到数组。
我认为你应该提供一个 Plunker 来演示你尝试了什么、当前的行为是什么以及预期的行为是什么。
@GünterZöchbauer - 我在这里创建了一个 plunker - plnkr.co/edit/uWr2bU0L3RdWLKzylwkH?p=preview 出于某种原因，无论您单击哪个单选按钮，都只会检查最后一个单选按钮。此外，选择单选按钮会将值设置为 true，但如果您选择不同的选项，之前的 true 选项仍会设置为 true。

标签： angular

【解决方案1】：

我遇到了类似的问题。这是一个设计问题。单选按钮旨在允许用户从列表中选择单个值，因此将它们各自绑定到单独的布尔值与它们的用途不一致。

和你一样，我想使用单选按钮，因为它们具有“单值”字符，而无需在提交表单时执行大量额外的 javascript 工作来强制它们在我的数据结构上的行为。最终，我使用（更改）事件绑定来解决这个问题，以便在单击单选按钮时相应地更新我的数据结构。

模板：

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

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

【讨论】：

【解决方案2】：

我无法运行您的 plunker 示例。但是找出解决您问题的方法。这是工作的example

模板代码

<!-- For checkboxes buttons -->

<div  *ngFor="let button of buttons">
<input type="checkbox" [(ngModel)]="button.checked">
{{button.value}} {{button.checked}}
</div>

<!-- For Radio buttons-->
<div  *ngFor="let button of buttons1.options">
<input type="radio" [value]="button.text"
               name="sex" [(ngModel)]="buttons1.value" >

</div>
{{buttons1.value}}

TS 代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  temmp= false;
  name = 'Angular';
  buttons =[{
    value: "red"
  },
  {
  value:"green",
}]

 buttons1 ={
   options : [
    new Answer("Red"),
    new Answer("Blue"),
    new Answer("Green"),
    new Answer("Orange")],
value:""
 }

}


class Answer {

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

}

如果您有任何问题。告诉我。

旁注：请使用 stackblitz 而不是 plunker。

【讨论】：