首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我在div元素上实现选择/取消选择。我可以在一次单击时选择div,但不能在下一次单击同一div时取消选择它?

我在div元素上实现选择/取消选择。我可以在一次单击时选择div,但不能在下一次单击同一div时取消选择它?
EN

Stack Overflow用户
提问于 2019-06-12 00:48:34
回答 1查看 122关注 0票数 1

我正在使用for循环使用div实现用户名列表。我想在第一次单击时选择div,在下一次单击时取消选择。

我已经尝试过选择代码,但无法在第二次单击时取消选择。

TS

代码语言:javascript
复制
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

代码语言:javascript
复制
<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>

我想在这个列表上实现多选,同时取消选择选项。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-12 01:23:41

我假设您想要在selected数组中存储所有选定的项。

然后在你的TS文件中

代码语言:javascript
复制
selectItem(obj, idx) {
    this.selected[idx] = !this.selected[idx] ? obj : null;
    console.log("Here are selected", this.selected);
}

在您的模板中,按如下所示更改[ngClass]

代码语言:javascript
复制
<div [ngClass]="{'selectedDiv': selected[idx]}" class="select-stl">
    // Display list item
</div>

在这里,我们在单击时发送所选用户的索引,并将该用户的数据存储在selected中的相同索引中。在取消选择时,我们将数据替换为null。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56548380

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档