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

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。如果您想对问题投反对票，请给我一个很好的解释，为什么问题没有显示研究成果或其不清楚或没有用，thx

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

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

Conditionaly render template based on item in array

angular-ng-if

ngfor

angular