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

Question

我正在使用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;
}

感谢帮助！

Answer 1

在您的组件中：

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

并在模板中：

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

解释： 每次选中该框时都会设置活动索引，但您永远不会重置活动索引。在模板中，我们还需要 activeIndex 的类型，因为索引0 != undefined会返回 false。 我相信这些复选框甚至还有一个更干净的解决方案。

此外，您不必编写question.options[i].correct还可以使用option.correct来存档相同的效果，这之前在 ngfor 循环中启动。