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

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

开发过程中遇到正确绑定单选组中的布尔值的问题如何解决?下面主要结合日常开发的经验,给出你关于正确绑定单选组中的布尔值的解决方法建议,希望对你解决正确绑定单选组中的布尔值有所启发或帮助;

问题描述

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

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

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

编程问答问答

在 CSS 中设置 cellpadding 和 cellspacing?
如何在 Java 中创建内存泄漏?
浮点数被破坏了吗?
按字符串属性值对对象数组进行排序
如何加快Android模拟器的速度?
如何舍入至多 2 位小数?
使用 Git 版本控制查看文件的更改历史记录
如何在 JavaScript 中检查空/未定义/空字符串?
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注