Question

我正在使用for循环使用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中的同一索引处。取消选择后，我们将数据替换为空。

我在div元素上实现选择/取消选择。我可以一键选择div，但不能再次单击同一div取消选择它？

1 个答案: