如何切换使用* 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开头。