根据数组中的项目有条件地渲染模板

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'" 是不可能的，因为对象的真正复杂性。

附言。如果您想对一个问题投反对票，请给我一个很好的解释，为什么问题没有显示出研究成果或其不清楚或无用，谢谢

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() 可能足够快，可以从视图中调用。