Javascript 如何切换使用*ngFor显示的多个列表项的类别

我用

*ngFor

显示不同类型的列表。我需要的是当你点击任何类型时，类

。过滤的
应该被切换（如果你点击类型A，然后点击类型B，两者都应该有类
。过滤的
，如果再次点击所选类型，类应该被删除）

组件

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>


类型
{{item}}



它现在的工作方式是，只在一种类型上切换类，并从其他类型中取消选择
 您可以使用数组：

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



这假设每个数组索引的默认值开始为false。
一种方法是创建一个单独的循环组件，并在该组件中处理单击事件，然后您可以轻松切换单个项目。感谢它的大量工作，有可能添加修改吗？当您选择“所有”选项时，它将取消选择（移除类）全部选中？或者我需要为此编写一个函数？最好的方法是为它创建一个函数，在数组中循环并将其他函数重置为false。