Угловой 6, доступ к переменной компонента внутри области действия ngFor

Question

Как получить доступ к глобальной переменной компонентов внутри области действия цикла ngFor (которая находится в html-шаблоне компонента).

Пожалуйста, не говорите мне, что это невозможно, я уже достаточно разочарован Angular.

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

Это не работает. Как я могу использовать 'globalVariable' внутри области действия ngFor?

globalVariable определяется в компоненте следующим образом:

@Input() globalVariable: 'someClass';

Answer 1

Передайте параметр globalVariable как (обратите внимание на одинарную кавычку):

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

Тогда все будет работать так, как вы ожидаете:

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

Подробнее см. this

Answer 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>

Answer 3

Используйте директиву ngClass.

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

stackblitz