如何使用 ngIf 循环设置 ngModel

Question

如何使用 ngIf 在 ngFor 循环中设置 ngModel？

我正在使用 Angular 8.2.14 和 @progress/kendo-angular-inputs

在下面的代码中，如果 option === checked，我如何使用 ngif 将 ngModel 设置为 true？
否则所有的复选框都被选中, 而不仅仅是应该检查的那个。

<div*ngFor="let option of contacts">
  <input
    style="width: auto; margin-right: 10px"
    type="checkbox"
    value="{{ option }}"
    [(ngModel)]="checked"
    kendoCheckBox
  />
  <label for="{{ option }}">{{ option }}</label>
</div>

Answer 1

为什么你一开始甚至要一个 ngIf（使用 ngIf 无论如何你都会隐藏你的复选框）。 我想你想实现的是这样的。

// in your html
<div *ngFor="let option of contacts">
<input
  style="width: auto; margin-right: 10px"
  type="checkbox"
  [checked]="checked === option"
  (change)="changeCheck(option)"
 />
 <label for="{{ option }}">{{ option }}</label>
</div>

// in your ts
  contacts = ['a', 'b', 'c'];
  checked = 'a';

通过这种方式，您将创建 3 个复选框，您可以单独选中每个复选框。