在angular2中一次启用一个复选框答案

【问题标题】：Enable one checkbox at a time in angular2在angular2中一次启用一个复选框
【发布时间】：2019-02-08 10:04:39
【问题描述】：

我正在使用 ngFor 动态生成多个复选框。但是在这里我需要一次启用一个复选框，如果选中一个复选框，则需要禁用其他复选框。同样，如果我取消选中该复选框，则需要启用其他复选框。如何在 angular2 中实现这一点？

<div class="col-12 mb-2" *ngFor="let option of question.options; let i = index;">
<input type="checkbox"
       [(ngModel)]="question.options[i].correct"
       [disabled]="!question.options[i].correct && i != activeIndex"
       (ngModelChange)="copyQuestionmarks(i)">
</div>

在代码中，如果复选框不是正确选项并且不是活动索引，我将禁用该复选框。这仅适用于第一次，假设如果我取消选中此其他复选框将不会启用。

下面是我的 .ts 代码

public copyQuestionmarks(i: number) {
  this.activeIndex = i;
}

帮助表示赞赏！

【问题讨论】：

标签： typescript angular2-template

【解决方案1】：

在您的组件中：

public copyQuestionmarks(i: number) {
  this.activeIndex = this.activeIndex === i ? i : undefined;
}

在模板中：

[disabled]="!question.options[i].correct && i !== activeIndex"

说明：每次选中该框时都会设置 activeIndex，但您从不重置 activeIndex。在模板中，我们还需要 activeIndex 的类型，因为 index 0 != undefined 会返回 false。我相信这些复选框甚至还有更清洁的解决方案。

另外你不必写question.options[i].correct你也可以使用option.correct来存档同样的效果，这是在ngfor循环中初始化的。

【讨论】：