Angular 6，ngFor范围内的访问组件变量

Question

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

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

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

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

“ globalVariable”在组件中的定义如下：

@Input() globalVariable: 'someClass';

Answer 1

使用ngClass指令。

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

stackblitz

Answer 2

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

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

然后它将按您期望的那样工作：

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

有关更多详细信息，请参见this

Answer 3

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

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

在上一行中，您的父组件ts文件中应该定义了globalVariable。

对我来说，其余代码看起来还不错：

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