我在div元素上实现选择/取消选择。我可以在一次单击时选择div，但不能在下一次单击同一div时取消选择它？
我在div元素上实现选择/取消选择。我可以在一次单击时选择div，但不能在下一次单击同一div时取消选择它？
提问于 2019-06-12 00:48:34
我正在使用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>我想在这个列表上实现多选，同时取消选择选项。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-12 01:23:41
我假设您想要在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中的相同索引中。在取消选择时，我们将数据替换为null。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56548380
复制相关文章
相似问题
腾讯云开发者
