javascript - 如何切换用 *ngFor 显示的多个列表项的类

Question

我用 *ngFor 显示不同类型的列表。我需要的是当你点击任何类型时，类 .filtered 应该被切换(如果你点击 typeA 然后点击 typeB 两者都应该有类 .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 开头。