如何在* ngFor中单击以选择特定的div? [英] How to select specific div on click in *ngFor?

问题描述

我的模板中有这个

 <div class="ui-g" *ngFor="let product of products;let i=index" (change)="sum(i)" (click)="selectItemForDelete(product)" [ngClass]="{'selected':products[i] == i}">
</div>

我想要的是在单击的div上添加类selected.有什么建议我该怎么做?

What i want is to add class selected on clicked div. Any suggestion how can i do that?

这是我的点击方法:

 selectItemForDelete(item): void {
        if (this.selected.indexOf(item) === -1) this.selected.push(item);
        else this.selected.splice(this.selected.indexOf(item), 1);
    }

推荐答案

[ngClass]="{'selected':products[i] == i}"

应该是

[ngClass]="{'selected':selected.includes(product)}"

我认为一种更有效的方法是创建大小为products的第二个数组.

I think a more efficient way would be to create a 2nd array of the size of products.

constructor() { // ngOnInit(), ...
  this.products = someValue; // whereever `products` is initialized
  this.selected = this.products.map((p) => false);
}

selectItemForDelete(idx:number): void {
  selected[idx] = !selected[idx];
}

使用

<div class="ui-g" 
    *ngFor="let product of products;let i=index" 
    (change)="sum(i)" 
    (click)="selectItemForDelete(idx)" 
    [ngClass]="{'selected':selected[i]}">
</div>

这篇关于如何在* ngFor中单击以选择特定的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！