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

考虑以下代码：

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

{{var.text}}

这将失败，因为

var

仅在

ngFor

循环上下文中起作用。正如您所见，我需要循环上下文之外的

var

数据的一些分区。是否有可能通过其他黑客将其封装在某个模板变量中

---

注意：我知道，这是设计的行为，上面的代码被简化了（

var

需要几个级别）。

为什么不简单地这样做呢

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

{{var.text}}

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

app.component.ts

app.component.html

{{var.text}}

因为只有进入列表才能获取列表的值。

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

{{var.text}}

我没有得到你想要的。你认为国家会是什么样子？您可以使用vars[0]。state或vars[vars.length-1]。state

var

不存在于

ngFor

循环范围之外，它们不在我想访问的位置，我忘了提到，我提供了一个简化的示例，在上面的级别上托管

ngFor

。试想一下情况，当您生成表（一个

ngFor

）时，在表内生成单元格（第二个

ngFor

）。单个单元格的状态可能会影响行，但单元格的数据来自嵌套的

ngFor

这应该是opt方法，但他希望在范围之外使用它。@Tomas不确定我是否理解您想要实现的目标。你应该提供一个完整的例子。您的实际票证没有意义。

var.state

中的

state

的预期值是多少<代码>变量[0]，

变量[1]

@Alexander，正如@Manish提到的，我需要访问它的

*ngFor

范围之外的模板var。虽然您的答案非常有意义，如果我可以在upper标记中托管

*ngFor

（示例中为uppet

div

），但我的用例是我不会复制一些更高的元素，而嵌套的变量仍然对它们有一些影响。在我的例子中，

var.state

只是

undefined

，并且由于使用@HostBinding进行范围界定而导致

TypeError

也可能会起作用，这只是一个旁注，并且如果在单独的组件中封装此模板分区是徒劳的

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

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