Angular 6，在 ngFor 范围内访问组件变量答案

【问题标题】：Angular 6, access component variable inside ngFor scopeAngular 6，在 ngFor 范围内访问组件变量
【发布时间】：2019-04-05 09:18:25
【问题描述】：

如何访问 ngFor 循环范围内的组件全局变量（位于组件的 html 模板中）。

请不要告诉我这是不可能的，我已经对 Angular 感到失望了。

<ng-container *ngFor="let option of options">
   <label class="{{globalVariable}}">{{option}}</label>
</ng-container>

这不起作用。如何在 ngFor 范围内使用“globalVariable”？

'globalVariable' 在组件中定义如下：

@Input() globalVariable: 'someClass';

【问题讨论】：

globalVariable 是一个类吗？
能否请您提供您拥有全局变量的组件代码。
你在哪里定义了 globalVariable ？ class="{{globalVariable}}" 或 [ngclass]="globalVariable" 两者是等价的。

【解决方案1】：

使用 ngClass 指令。

<p [ngClass]="red">
  Start editing to see some magic happen :)
</p>

【讨论】：

【解决方案2】：

您已经定义了 @Input() globalVariable: string; 。因此，我相信您将 globalVariable 作为父组件的输入传递，如下所示：

<parent-comp [globalVariable]="globalVariable"></parent-comp>

在上面的行中应该有globalVariable 在你的父组件 ts 文件中定义。

你的其余代码对我来说看起来不错：

<ng-container *ngFor="let option of options">
   <label class="{{globalVariable}}">{{option}}</label>
</ng-container>

【讨论】：

【解决方案3】：

像这样传递参数globalVariable（注意单引号）：

<app-temp [globalVariable]="'globalVariable'"></app-temp>

然后它将按您的预期工作：

<ng-container *ngFor="let option of options">
   <div class="{{globalVariable}}">{{option}}</div>
</ng-container>`

更多详情请见this

【讨论】：