在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，但您从不重置activeIndex。在模板中我们还需要activeIndex的类型，因为索引0 != undefined将返回false。我相信这些复选框甚至可以提供更清晰的解决方案。

更进一步，你不必写question.options[i].correct你也可以使用option.correct存档相同的效果，这在之前的ngfor循环中被初始化了。