基于数组中的项有条件地呈现模板

Question

这是一个简单的例子，真正的问题更复杂。

cars: string[] = ['audi', 'opel', 'mazda'];
isAudi: boolean = false;
isOpel: boolean = false;
checkCar(car):void {
    if(car == 'audi'){
        this.isAudi = true;
    }
}
<div *ngFor="let car of cars" (validationCheck)="checkCar(car)">
    <p *ngIf="isAudi">Audi: {{car}}</p>
    <p *ngIf="isOpel">Opel: {{car}}</p>
</div>

validationCheck 是触发数组中每个项目函数的指令。

这将输出：

Audi: audi
Audi: opel
Audi: mazda

我只想展示：

Audi: audi

由于对象的真实复杂性，*ngIf="car == 'audi'"是不可能的。

Ps. 如果你想对一个问题投反对票，请给我一个很好的解释，为什么问题没有显示研究工作或不清楚或没有用，谢谢

Answer 1

你没有走在正确的轨道上。

每辆车上都绑定着"isAudi"的旗帜：每辆车都是奥迪，也不是。所以旗帜应该在车里，而不是在组件里。或者它应该从汽车中计算出来。

因此，解决方案一：

<div *ngFor="let car of cars">
  <p *ngIf="isAudi(car)">Audi: {{car}}</p>
  <p *ngIf="isOpel(car)">Opel: {{car}}</p>
</div>
isAudi(car: string) {
  return car === 'Audi';
}
isOpel(car: string) {
  return car === 'Opel';
}

第二种解决方案，如果上述情况导致性能问题，因为isAudi((计算起来非常复杂(我对此表示怀疑(，请使用对象，预先计算isAudi并在获取数据时isOpel，并将其存储在汽车中：

interface FlaggedCar {
  car: string;
  isAudi: boolean;
  isOpel: boolean;
}
this.flaggedCars = cars.map(car => {
  return {
    car,
    isAudi: this.isAudi(car),
    isOpel: this.isOpel(car)
  }
});
<div *ngFor="let flaggedCar of flaggedCars">
  <p *ngIf="flaggedCar.isAudi">Audi: {{flaggedCar.car}}</p>
  <p *ngIf="flaggedCar.isOpel">Opel: {{flaggedCar.car}}</p>
</div>

当然，这是假设汽车没有经过改装，也不会成为欧宝。或者每次汽车更换时都必须重新计算标志(这使得此解决方案更加复杂(。

但同样，您可能不需要这种复杂性，因为isAudi()和isOpel()可能足够快，可以从视图中调用。