正确绑定单选组中的布尔值

如何解决正确绑定单选组中的布尔值

我一直在与这些单选按钮作战，但是似乎没有进展。

我有一个来自数据库的动态答案列表，如下所示：

answers = [
  { answer: "an answer",valid: false },{ answer: "second answer",valid: true },{ answer: "another answer",];

我需要能够像这样绑定到单选按钮

<div *ngFor="let ans of answers; let i = index">
  <input
    type="radio"
    id="customRadio{{i}}"
    [(ngModel)]="ans.valid"
    name="exm_qst_vld"
    [checked]="ans.valid==true"
    [value]="ans.valid"
  />
<ckeditor [editor]="Editor" [(ngModel)]="ans.answer" name="answer{{i}}"></ckeditor>
</div>

它不起作用。所有单选按钮均显示为未选中状态。同时单击它们也没有任何作用。

有人有什么想法

解决方法

尝试这个问题可能是3个单选按钮中的2个具有相同的值：

the default value is in effect modified

,

这是一种预期的行为，因为代码的任何部分都没有将取消选择的选项的valid属性更改为false。

使用ngModel应该只有一个模型代表当前选择的项目，如下所示：

public answers = [
  { answer: "an answer" },{ answer: "second answer" },{ answer: "another answer" },]

public selected = this.answers[0]

<ng-container *ngFor="let x of answers; let i = index">
  <label [for]="i">{{x.answer}}</label>
  <input type="radio"
    [id]="i"
    [value]="x"
    [(ngModel)]="selected" />
</ng-container> 

,

感谢@Rafi Henig。 您的解决方案有效，因此我将其标记为正确的答案。但是，这并不是我想要的。我真的不喜欢从选择收音机中分离答案。

我已经决定使用复选框，因为它们似乎可以毫无麻烦地工作。

<div *ngFor="let ans of answers; let i = index">
  <input type="checkbox" class="toggle-state" (click)="ans.valid? false : mcsaClicked(ans)" [(ngModel)]="ans.valid" name="valid{{i}}"/>
  <ckeditor [editor]="Editor" [(ngModel)]="ans.answer" name="answer{{i}}"></ckeditor>
<div>

然后在组件中，我做了...

mcsaClicked(answer: IAnswer): void {
  this.answers.forEach((ans) => {
      ans.valid= false;
  });
  answer.valid= true;
}