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循环中就已开始使用。

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

1 个答案: