Javascript 如果为真，如何在NGF中跳过，或以其他方式（角度）

我有一个更为理论化的问题，在我的应用程序中，我有一个组件作为

@Input

接收一个包含对象的数组，其中可以是（或不是）三个类别中的一个，也可以分为三种类型，因此以下是主要类别：

汽车

汽车

汽车间谍

而且它们中的每一个都可以带有部分

\u mid

或

\u low

，以显示其优先级

因此，arr可以如下所示：

[
  {id: 2, key: "car_def"},
  {id: 2, key: "car_def_low"},
  {id: 2, key: "car_fyr"},
  {id: 2, key: "car_fyr_mid"}
]
 OR
[
  {id: 2, key: "car_spy"},
  {id: 2, key: "car_def"},
  {id: 2, key: "car_fyr"},
  {id: 2, key: "car_fyr_mid"}
]...

如果我收到某个类别，我需要在模板中显示它，但只显示一次和主名称。在它附近应该有一个图标，我有另一个func，需要传递一个类别，作为参数。 例如，它应该是

car\u def，car\u fyr

，或者

car\u spy，car\u def，car\u fyr

现在，我在.ts中编写了一个函数

@Input cars;
ngOnInit(): void {
    this.isDisplayed(this.cars);
}
isDisplayed(arr) {
    let str = arr.map(car => car.key).join(' ');
    if (str.match('car_def')) {
      this.isDef = true;
    }
    if (str.match('car_fyr')) {
      this.isFyr = true;
    }
    if (str.match('car_spy')) {
      this.isSpy = true;
    }
  }

在HTML中，我使用*ngIf

<div #container>
  <div *ngIf="isDef">
    CAR_DEF <icon icon="{{displayIcon('car_def')}}"></icon>
  </div>
  <div *ngIf="isFyr">
    CAR_FYR <icon icon="{{displayIcon('car_fyr')}}"></icon>
  </div>
  <div *ngIf="isSpy">
    CAR_SPY <icon icon="{{displayIcon('car_spy')}}"></icon>
  </div>
</div>

汽车
汽车
汽车间谍

所以，我的问题是，有没有更好的写作方法？我考虑过

*ngFor

，但在这种情况下不知道如何只显示一次类别

---

如果您有任何建议，我将不胜感激

这将简化它一点-当您添加更多类型类别时，您的HTML不需要更新

@Input cars;
typeData: any
 
isDisplayed(arr) {
    let str = arr.map(car => car.key).join(' ');
    if (str.match('car_def')) {
      this.typeData = {typeName: "CAR_DEF", icon: this.displayIcon('car_def')};
    } else if (str.match('car_fyr')) {
      this.typeData = {typeName: "CAR_FYR", icon: this.displayIcon('car_fyr')};
    } else if (str.match('car_spy')) {
      this.typeData = {typeName: "CAR_SPY", icon: this.displayIcon('car_spy')};
    }
  }


<div #container>
  <div *ngIf="typeData.typeName">
    {{typeData.typeName}} <icon icon="{{typeData.icon}}"></icon>
  </div>
</div>

@输入车；
类型数据：任何
显示ISD（arr）{
让str=arr.map（car=>car.key）.join（“”）；
如果（str.match（'car_def'））{
this.typeData={typeName:“CAR_DEF”，图标：this.displayIcon（'CAR_DEF'）；
}否则如果（str.match（'car_fyr'））{
this.typeData={typeName:“CAR_FYR”，图标：this.displayIcon（'CAR_FYR'）}；
}否则如果（str.match（'car\u spy'））{
this.typeData={typeName:“CAR\u SPY”，图标：this.displayIcon（'CAR\u SPY'）；
}
}
{{typeData.typeName}