在模板外部上下文中访问ngFor变量

Question

考虑以下代码：

<div [ngClass]="var.state">
  <div *ngFor="let var of vars">{{var.text}}</div>
</div>

由于var仅限ngFor循环上下文中的范围，因此会失败。如您所见，我需要在循环上下文之外对var数据进行一些分区。是否有可能将其包含在任何其他黑客的某个模板变量中？

注意：我知道，这是设计上的行为，上面的代码已经简化了（var需要几个级别）。

Answer 1

在 component.ts 文件中使用它的唯一方法，并将所需的一个存储为变量并在html中使用。

  

app.component.ts

flag:any;
ngOnInit(){
  vars.forEach(var=>{
       if(var=="some-condition")
           //yes set this flag
  });
}

  

app.component.html

<div [ngClass]="flag">
  <div *ngFor="let var of vars">{{var.text}}</div>
</div>

因为你只能通过进入列表来获取列表的值。

Answer 2

为什么不简单地这样做？

<div *ngFor="let var of vars" [ngClass]="var.state">
  <div>{{var.text}}</div>
</div>