Как я могу получить доступ к свойству checked флажка, который индексируется циклом * 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)">

В вашем ТС:

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

Теперь вы можете использовать эту ссылку на память для сравнения с элементами, когда вы [не] проверяете их все:

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

При наличии ссылки на память вам больше не нужен идентификатор.