如何在Angular2 ngSwitch语句中使用打印脚本枚举值

Typescript enum似乎与Angular2的ngSwitch指令自然匹配。 但是，当我尝试在我的组件的模板中使用枚举，我得到“无法读取属性'xxx'未定义在…”。 我怎样才能在我的组件模板中使用枚举值？

请注意，这与如何基于枚举（ngFor）的所有值创buildhtml选项不同。 这个问题是关于ngSwitch基于一个枚举的特定值。 虽然同样的方法创build类的内部引用的枚举出现。

Answer 1

你可以在你的组件类中创build一个对枚举的引用（我刚刚把初始字符改为小写），然后从模板（ 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; } } 

Answer 2

您可以创build一个自定义装饰器添加到您的组件，使其知道枚举。

myenum.enum.ts：

 export enum MyEnum { FirstValue, SecondValue } 

myenumaware.decorator.ts

 import { MyEnum } from './myenum.enum'; export function MyEnumAware(constructor: Function) { constructor.prototype.MyEnum = MyEnum; } 

枚举aware.component.ts

 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; } } 

Answer 3

从RC6 /最后

…

 export enum AdnetNetworkPropSelector { CONTENT, PACKAGE, RESOURCE } <div style="height: 100%"> <div [ngSwitch]="propSelector"> <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT"> <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel"> </AdnetNetworkPackageContentProps> </div> <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE"> </div> </div> </div> export class AdnetNetwork { private adnetNetworkPropSelector = AdnetNetworkPropSelector; private propSelector = AdnetNetworkPropSelector.CONTENT; } 

Answer 4

如果使用'typetable reference'方法（来自@Carl G），并且使用多个types表，则可能需要这样考虑：

 export default class AppComponent { // Store a reference to the enums TT = { CellType: CellType, CatType: CatType, DogType: DogType }; ... dog = DogType.GoldenRetriever; 

然后访问你的HTML文件

 {{ TT.DogType[dog] }} => "GoldenRetriever" 

我喜欢这种方法，因为它清楚地表明你指的是一个types表，也避免了对你的组件文件的不必要的污染。

你也可以把一个全局TT放在某个地方，并根据需要添加枚举。 还记得你能不能在你的声明中重新命名它们来得到一个更短的名字。

Answer 5

Angular4 – 在HTML模板ngSwitch / ngSwitchCase中使用Enum

解决scheme在这里： https : //stackoverflow.com/a/42464835/802196

信用：@snorkpete

在你的组件中，你有

 enum MyEnum{ First, Second } 

然后在你的组件中，通过成员“MyEnum”引入Enumtypes，并为你的枚举variables“myEnumVar”创build另一个成员：

 export class MyComponent{ MyEnum = MyEnum; myEnumVar:MyEnum = MyEnum.Second ... } 

您现在可以在.html模板中使用myEnumVar和MyEnum。 例如，在ngSwitch中使用枚举：

 <div [ngSwitch]="myEnumVar"> <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div> <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div> <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div> </div>