在 ngClass 中使用 ngFor 作用域变量作为 className 的变量

Question

what i'm trying to achieve is to change class dynamically using the value of the ngFor scoped variable as the class of the label.Here's my code:

 <ul formArrayName="pokeTypes">
            <li [formGroup]="nestedForm" *ngFor="let type of this.createListOfTypes()|async; let i = index">
                <!-- add style!  -->
                <input type="checkBox" [id]='type' [value]="type" [formControlName]="type"
                    (change)="onCheckStateChange($event)">
                <label [for]="type" [ngClass]="{'{{type}}': pokeTypes.controls[0].get('type').value !== null }">{{type|titlecase}}</label>
            </li>
        </ul>
```**strong text**

Answer 1

Don't use ng class for this

<label [for]="type" [ngClass]="{'{{type}}': pokeTypes.controls[0].get('type').value !== null }">{{type|titlecase}}</label>

Instead you can toggle your class like so:

class="{{ pokeTypes.controls[0].get('type').value !== null ? type : '' }}"

Or something similar.