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'"是不可能的。

聚苯乙烯。如果你想提出一个问题，请给我一个很好的解释，为什么问题不显示研究工作或不清楚或没有用，thx

Answer 1

你没有走上正轨。

旗帜＆＃34; isAudi＆＃34;对每辆车都有约束力：每辆车都是奥迪或不是。因此标志应该在汽车中，而不是在组件中。或者它应该从汽车计算。

所以，解决方案之一：

<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基于数组中的项目渲染模板

1 个答案: