ngClass ne fonctionne pas comme il se doit

Question

Je joue avec ngClass, et je ne sais pas ce que je fais mal. Il montre un comportement étrange. Il semble que lorsque j'assigne une fonction à ngClass, cela ne fonctionne pas, mais si je lui assigne un objet littéral cela fonctionne. Comment puis-je faire fonctionner ngClass avec la fonction de mon composant?

ProposalForm.ts

import {Component} from 'angular2/core'; 
import {NgClass} from 'angular2/common'; 
@Component({ 
    selector: 'proposal-form', 
    template: ` 
    <div [ngClass]="setClasses()"> 
    ghtfhg 
    </div> 
    <div [ngClass]="{active:true, disabled:true}"> 
    1111111 
    </div>`, 
    directives:[NgClass] 
}) 
export class ProposalForm { 

    setClasses() { 
    return {active:true, disabled:true}; 
    } 
} 

En regardant cet inspecteur de Chrome est le HTML

<proposal-form _ngcontent-xxb-2=""> 
<div class=""> 
    ghtfhg 
</div> 
<div class="active disabled"> 
    1111111 
</div></proposal-form> 

Answer 1

Vous ne fournissez pas beaucoup d'informations sur quoi ou comment il ne fonctionne pas. Je suppose que le problème est que setClasses() retourne toujours un objet différent et Angulars change la détection n'aime pas cela.

Vous devriez plutôt se lier à un champ

classes = {active:true, disabled:true}; 

puis mettez à jour la valeur de classes lorsqu'une valeur cela dépend de changements.

Answer 2

@WShell. Vous faites tout correctement. Cependant, j'ai signalé ce problème à l'équipe angulaire et ils ont confirmé que c'est un bug. Définir les classes comme vous avez du composant avec la méthode setClasses ne fonctionne pas dans les dernières versions d'Angular2. Pour l'instant, vous devez définir vos classes dynamiquement en ligne comme celui-ci:

[ngClass]="{active: isOn, disabled: isDisabled}" 

Comme à problème signalé: https://github.com/angular/angular/issues/7426