如何切換以* ngFor顯示的多個列表項的類

Question

我用*ngFor顯示不同類型的列表。 我需要的是，當您單擊任何類型時，都應切換.filtered類（如果單擊typeA然后在typeB上都應具有class .filtered ，如果再次單擊所選類型，則應刪除類）。

零件

this.type = ["All", "typeA", "typeB", "typeC", "typeD", "typeE"]

HTML

<li> 
 <a id="filter">Type <i class="fa fa-caret-down" aria-hidden="true"></i></a> 
 <div class="drop-options tipoOption"> 
   <div *ngFor="let item of type;let i=index" 
    class="drop-option" 
    (click)="isClicked = i;" 
    [class.filtered]="isClicked==i"> 
    <span></span> 
    <p>{{ item }}</p> 
  </div> 
 </div> 
</li>

現在它的工作方式是，僅在一種類型上切換類，然后從其他類型上取消選擇。

Answer 1

您可以使用數組：

<div *ngFor="let item of type;let i=index" 
    class="drop-option" 
    (click)="isClicked[i] = !isClicked[i];" 
    [class.filtered]="isClicked[i]">

假設每個數組索引的默認值以false開頭。