Angular 基于数组中项目的条件化渲染模板

这是一个简单的例子，实际问题更复杂

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>

我只想展示：

Audi: audi

*ngIf=“car==“audi”

是不可能的，因为对象的实际复杂性

---

注：如果你想否决一个问题，请给我一个很好的解释，为什么这个问题没有显示出研究成果，或者它不清楚或者没有用，thx

你的思路不对

“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（）

和

isOpel（）

可能足够快，可以从视图中调用。

为什么您认为对象很复杂？因为我需要执行几个不同的条件来显示该部分，例如

*ngIf=“car&&car.manufacturer&&manufacturers.get（car.manufacturer.id）.manufacturer.name==“菲亚特”……依此类推”…

这里有一大堆很难维护的条件，所以我想把它放在组件文件中，如何向每辆车添加一个布尔字段，比如

show

？是否不可能创建一个方法，将所有复杂逻辑写在一个地方，然后添加到模板

*ngIf=“yourComplexMethod（）”

？通过这种方法，您不需要将（validationCheck）与

*ngFor

一起使用，这种方法在每个变更检测周期都会调用函数。我想避免这种情况。很好的解释，thx。“isAudi（）和isOpel（）可能足够快。”，是的，它们是，但是在每个变化检测周期中，它们都会被调用，如果从视图调用，这是一个好方法吗？如果它足够快，它足够快，对吗？现在当然，如果你瞄准旧的移动设备，并想尽可能地节省电池，你可以过度优化，但一般来说，过早优化是万恶之源。好的point，您对如何解决这个问题或首选的方法有什么建议吗？内联视图条件、来自组件的函数调用或第三种方法？从我的回答中不清楚吗？我建议使用第一种解决方案，或者如果确实需要优化，使用第二种解决方案。

<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';
}

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>