Enum Angular 2 avec ngClass

Question

Bonjour, j'essaie d'utiliser une classe conditionnelle avec un enum. J'ai déjà utilisé des enums en html avec ngSwitchCase et j'ai la même erreur que maintenant. Lorsque j'ajoutais une propriété appelée "enum" et que je l'assignais à cet enum, cela fonctionnait.

exemple de travail :

                    <ng-container *ngFor="let column of columns" [ngSwitch]="column.dataType">
                    <td *ngSwitchCase="DataType.Text">{{getPropertyValue(row,column.propertyName)}}</td>
                    <td *ngSwitchCase="DataType.Date">date</td>
                    <td *ngSwitchCase="DataType.Number">number</td>
                    <td *ngSwitchDefault>default</td>
                </ng-container>

ts

private DataType = DataType;

ne fonctionne pas :

            <span *ngClass="(column.sortType === SortType.Ascending)? 'privilege-grid-sortasc': (column.sortType === SortType.Descending)?'privilege-grid-sortdesc':'privilege-grid-sortnone'"></span> 

J'ai également essayé [ngClass] ="{'class-name': var === enum,...}"

ts

   private SortType = SortType;

message d'erreur :

Impossible de lire la propriété 'Ascending' d'undefined.

Answer 1

J'ai trouvé un très bon tutoriel ici : https://coryrylan.com/blog/angular-tips-template-binding-with-static-types

en résumé, la syntaxe est [ngClass] = "{'class-name' : var === enum}" :

@Component({
  selector: 'app-message',
  template: `
    <div class="message" [ngClass]="{
      'message--error': messageTypes.Error === type,
      'message--success': messageTypes.Success === type,
      'message--warning': messageTypes.Warning === type
    }">
      <ng-content></ng-content>
    </div>
  `
})
export class MessageComponent implements OnInit {
  @Input() type = MessageTypes.Default;
  private messageTypes = MessageTypes; //very important to declare here

  constructor() { }

  ngOnInit() { }
}

Answer 2

Je pense que votre problème doit se situer ailleurs. J'ai recréé votre scénario en utilisant la liaison [ngClass] avec un enum et cela fonctionne bien pour moi :

[ngClass] ="{'class-name': var === enum,...}"

Dans le deuxième cas, votre modèle se trouve-t-il dans un fichier .html distinct et non dans le premier cas ? J'ai eu des problèmes lorsqu'une variable privée de mon fichier de composants ne pouvait pas être lue par le fichier de modèle.