La enumeración Typescript parece una coincidencia natural con la directiva ngSwitch de Angular2. Pero cuando trato de usar una enumeración en la plantilla de mi componente, aparece "No se puede leer la propiedad 'xxx' de indefinido en ...". ¿Cómo puedo usar valores de enumeración en mi plantilla de componente?
Tenga en cuenta que esto es diferente de cómo crear opciones de selección html basadas en TODOS los valores de una enumeración (ngFor). Esta pregunta es sobre ngSwitch basado en un valor particular de una enumeración. Aunque aparece el mismo enfoque de crear una referencia interna de clase a la enumeración.
Puede crear una referencia a la enumeración en su clase de componente (solo cambié el carácter inicial para que sea en minúsculas) y luego use esa referencia de la plantilla ( plunker ):
import {Component} from 'angular2/core'; enum CellType {Text, Placeholder} class Cell { constructor(public text: string, public type: CellType) {} } @Component({ selector: 'my-app', template: ` <div [ngSwitch]="cell.type"> <div *ngSwitchCase="cellType.Text"> {{cell.text}} </div> <div *ngSwitchCase="cellType.Placeholder"> Placeholder </div> </div> <button (click)="setType(cellType.Text)">Text</button> <button (click)="setType(cellType.Placeholder)">Placeholder</button> `, }) export default class AppComponent { // Store a reference to the enum cellType = CellType; public cell: Cell; constructor() { this.cell = new Cell("Hello", CellType.Text) } setType(type: CellType) { this.cell.type = type; } }Esto es simple y funciona de maravilla :) simplemente declare su enumeración de esta manera y puede usarla en la plantilla HTML
statusEnum: typeof StatusEnum = StatusEnum;Puede crear un decorador personalizado para agregar a su componente para que sea consciente de las enumeraciones.
export enum MyEnum { FirstValue, SecondValue } import { MyEnum } from './myenum.enum'; export function MyEnumAware(constructor: Function) { constructor.prototype.MyEnum = MyEnum; } import { Component } from '@angular2/core'; import { MyEnum } from './myenum.enum'; import { MyEnumAware } from './myenumaware.decorator'; @Component({ selector: 'enum-aware', template: ` <div [ngSwitch]="myEnumValue"> <div *ngSwitchCase="MyEnum.FirstValue"> First Value </div> <div *ngSwitchCase="MyEnum.SecondValue"> Second Value </div> </div> <button (click)="toggleValue()">Toggle Value</button> `, }) @MyEnumAware // <---------------!!! export default class EnumAwareComponent { myEnumValue: MyEnum = MyEnum.FirstValue; toggleValue() { this.myEnumValue = this.myEnumValue === MyEnum.FirstValue ? MyEnum.SecondValue : MyEnum.FirstValue; } }