如何在* ngFor中点击特定div？

我有这个在我的模板：如何在* ngFor中点击特定div？

<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类。任何建议我该怎么做？

这是我的点击方法：

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

来源

2017-09-08 None

请添加'selectItemForDelete（product）'的代码' –

我更新了我的问题 – None

我更新了我的答案。 –

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

应该

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

我认为更有效的方式是创建的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>

来源

2017-09-08 12:49:57

三个步骤：

你的HTML

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

在您的组件中的OnInit（）。
```
ngOnInit(){ this.divClass="ui-g"} 
```

在DIV的点击 - divclass

selectItemForDelete(product){this.divClass="selected";}

这就是它的变化值。

来源

2017-09-08 12:58:11

为什么我需要在init this.divClass =“ui-g”？ – None

@None这就是因为最初你希望为你的div使用ui-g类。 –

如何在* ngFor中点击特定div？

回答

相关问题