Я реализую select / deselect на элементе div. Я могу выбрать div одним щелчком мыши, но не могу отменить его при следующем нажатии на тот же div?

Question

Я реализую список имен пользователей с использованием div для цикла.Я хочу выбрать div при первом щелчке и отменить выбор при следующем щелчке.

Я попытался выбрать код, но не смог отменить выбор при втором щелчке.

TS :

selected: any = [];

selectItem(obj, idx) {
  this.selected[idx++] = obj;
  console.log('Here are selected', this.selected);
}

deleteUser(): void {
  console.log(this.selected);

  if (confirm('Are you to delete user ?')) {
    for (var user in this.selected) {
      this.apiserv.deleteUser(this.selected[user].id).subscribe((data: User) => {
        this.getAllUser();
      });
    }
  }
}

HTML :

<mat-list-item *ngFor="let u of users; let idx = index" class="user-item" (click)="selectItem(u,idx)">
  <div class="item-wrp">
    <div class="select-item item-block">
      <div [ngClass]="{'selectedDiv': idx == selected}" class="select-stl">
      </div>
    </div>
  </div>
</mat-list-item>

Я хочу реализовать множественный выбор в этом списке с возможностью отмены выбора.

Answer 1

Я предполагаю, что вы хотите сохранить все выбранные элементы в вашем массиве selected.

Тогда в вашем файле TS

selectItem(obj, idx) {
    this.selected[idx] = !this.selected[idx] ? obj : null;
    console.log("Here are selected", this.selected);
}

и в вашем шаблоне измените [ngClass] следующим образом

<div [ngClass]="{'selectedDiv': selected[idx]}" class="select-stl">
    // Display list item
</div>

Здесь мы отправляем индекс выбранного пользователя по клику и сохраняем данные этого пользователя по этому же индексу в selected. При отмене выбора мы заменяем данные на ноль.