正确绑定 radiogroup 中的布尔值

Question

我已经与这些单选按钮斗争了一段时间，但似乎没有进展。

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

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

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

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

它不起作用。所有单选按钮都显示为未选中。同样点击它们也没有任何效果。

有没有人有什么想法

Answer 1

试试这个，也许问题是，3 个中有 2 个 radio-buttons 具有相同的值：

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

Answer 2

这是预期的行为，因为您的代码的任何部分都不会将取消选择的选项的 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>

Answer 3

感谢@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;
}

正确绑定 radiogroup 中的布尔值

Correctly bind boolean values in radiogroup

angular

angular9