Impossible d'affecter [ngClass] aux composants Angular générés par * ngFor loop

Question

J'essaie de suivre an example en indiquant comment lier une classe active à un composant lorsque l'utilisateur clique dessus. Quand j'exécute le code basé sur le balisage ci-dessous

<div *ngFor="let menu of menus;" 
    [id]="menu.id" 
    (click)="onClick($event,menu.link)" 
    [ngClass]="'active':menu.active" 
    class="navigator"> 
    {{menu.title}} 
</div> 

Je reçois l'erreur suivante. NB - il y a la méthode onClick (...) dans le composant et au moment où j'ai commenté tout son contenu. L'erreur semble être purement liée au balisage (sauf si j'ai besoin de déclarer quelque chose de plus dans le composant, comme un tableau ou autre). Au moins autant que j'ai vu les exemples tout en googlearching ce problème.

Uncaught Error: Template parse errors:
Parser Error: Unexpected token ':' at column 9 in ['active':menu.active] in ng:///AppModule/NavigatorComponent.html@11:9 ("
[id]="menu.id"
(click)="onClick($event,menu.link)"
[ERROR ->][ngClass]="'active':menu.active"
class="navigator">
{{menu.title}}
"): ng:///AppModule/NavigatorComponent.html@11:9

Que manque-t-il?

Answer 1

'active':menu.active n'est pas une expression valide.

utilisateur soit l'objet syntaxe littérale

[ngClass]="{'active':menu.active}" 

ou la syntaxe de chaîne

[ngClass]="menu.active ? 'active' : null" 

ou

[class.active]="menu.active" 

Answer 2

Une autre approche dans ce cas, pourrait être en utilisant la propriété [classe] , car il pourrait être plus concis, comme l'a souligné @ Günter Zöchbauer:

<div *ngFor="let menu of menus;" 
    [id]="menu.id" 
    (click)="onClick($event,menu.link)" 
    [class.active]="menu.active" 
    class="navigator"> 
    {{menu.title}} 
</div> 

Answer 3

[ngClass]="{'active':menu.active}" 

Ceci est la syntaxe correcte