Question

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

isCorrect

我想将它绑定到一个单选按钮，如果选中单选按钮，true属性为false，否则为Answer。什么是正确的方法？

要清楚，我会有一个Answer的数组，每个<label *ngFor="let answer of answers"> <input #rad type="radio" name="answer-{{questionIndex}}" [(ngModel)]="answer.isCorrect" [value]="rad.checked"> {{answer.text}} </label>都会有一个单选按钮。

Plnkr Example

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

{!! Form::select('week_starts', [
    'Monday' => 'Monday',
    Tuesday' => 'Tuesday',
    Wednesday' => 'Wednesday',
    Thursday' => 'Thursday',
    Friday' => 'Friday',
    Saturday' => 'Saturday',
    Sunday' => 'Sunday'
], 'Friday') !!}

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

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

Answer 2

我无法运行您的pl夫示例。但是找出问题的解决方案。这是工作中的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 代替pl弹枪。

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

2 个答案: