如何访问由* ngFor循环索引的复选框的选中属性-Angular

Question

我有一个下拉元素列表，该列表由* ngFor循环索引。

<div class="item-wrapper" *ngIf="showItems">
  <div class="wrap-collapsible" *ngFor="let item of items; let i = index">
    <input id="{{i}}" class="toggle" type="checkbox">
    <label for="{{i}}" class="dropdown-toggle" tabindex="0" (click)="selectItem(item)">
      Threat {{item.id}}: {{item.category}}
    </label>
    <div class="collapsible-content">
      <div class="content-wrapper">
        <p class="title">{{item.title}}</p>
      </div>
    </div>
  </div>
</div>

默认情况下，复选框输入在单击时被选中，在选择其他元素时保持选中状态。

我如何取消选中除最后一个单击之外的所有元素？

我试着做...

<input id="{{i}}" type="checkbox" [checked]="i == selectedElement">

...同时在selectItem（）方法（其中selectedElement设置为i）中传递索引的同时。 这是行不通的，因为这样就无法选择任何项目。

谁能给我正确的方向推动？

Answer 1

绑定到输入的更改功能：

<input id="{{i}}" class="toggle" type="checkbox" (change)="setLastClicked(item)">

在您的TS中：

setLastClicked(item) {
  this.lastSelected = item;
}

现在，当您[取消]全部检查时，可以使用该内存引用与这些项目进行比较：

toggleCheck() {
  this.items.forEach(item => item.checked = {
    if(item === this.lastSelected) return;
    item.checked = !item.checked;
  });
}

使用内存引用，您不再需要该ID。