클릭하면 * ngFor에서 특정 div를 선택하는 방법?

Question

내 템플릿이 있습니다

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

는 내가 원하는 클릭 사업부에 클래스 selected를 추가하는 것입니다. 어떤 제안이라도 어떻게 할 수 있습니까?

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

Answer 1

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

이

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

내가 더 효율적인 방법은 products의 크기의 2 차 배열을 만들 수있을 거라고 생각해야한다 :

이것은 클릭 내 방법입니다 .

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

Answer 2

세 가지 단계를

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

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

:

1. 를 HTML

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

2. 아래 구성 요소에 OnInit().

   ngOnInit(){ this.divClass="ui-g"} 
   

3. 사업부의 클릭에 -

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

그게 전부를 divclass의 변화 값입니다.