在 Angular 模板中使用 TypeScript 枚举

枚举是TypeScript提供的一项便捷功能。枚举允许您使用有意义的名称（而不是在这种情况下通常使用的数字常量）从预定义的一组值中指定可能的属性值。例如，我们可以使用以下代码行指定FlexChart.chartType属性值：

1. chart.chartType = ChartType.Column;

复制代码

Angular 枚举

但是，Enum类型属性的问题出现在Angular模板中，您可能需要在其中指定其值，但不能这样做。唯一的方法是使用与枚举成员相对应的数字常量，但是这种方法会产生不清楚的标记，并且找出它们的值可能很烦人：

1. <wj-flex-chart [chartType]="2" …>

复制代码

问题的根源在于，除了Angular模板表达式中的组件属性外，无法引用任何内容。但是，这些属性仍然可用，因此让我们利用它吧！我们可以仅添加一个存储对必要的Enum类型的引用的属性，例如此处的ChartType属性：

1. import * as wjcChart from 'wijmo/wijmo.chart';
   
2. …
   
3. export class AppCmp {
   
4.     ChartType = wjcChart.ChartType;
   

复制代码

现在我们可以在模板绑定中引用枚举成员：

1. <wj-flex-chart [chartType]="ChartType.Column" …>

复制代码

Wijmo枚举类型属性

请注意，当涉及Wijmo组件时，此问题并不那么严重，您可以在其中将枚举成员的字符串名称分配给属性。此方法将起作用，因为所有Wijmo枚举类型属性都可以将此类字符串转换为实际的枚举值。例如：

1. <wj-flex-chart [chartType]=" 'Column' " …>

复制代码

但是，在双向绑定的情况下，此方法可能会引起问题。例如，如果要将可能的图表类型的菜单绑定到图表的chartType属性。您可能会得到其中一种可爱的“检查后表达式已更改”异常，或者所选菜单项不会显示在菜单标题中。使用真实枚举值的代码不会出现以下潜在问题：

1. Component:
   
2. chartType = wjcChart.ChartType.Column;
   
3. 
   
4. Template:
   
5. <wj-flex-chart [itemsSource]="data"
   
6.                [chartType]="chartType"
   
7.                [bindingX]="'country'"
   
8.                style="height: 200px">
   
9.     <wj-flex-chart-series [name]="'Downloads'" [binding]="'downloads'"></wj-flex-chart-series>
   
10. </wj-flex-chart>
    
11. <wj-menu [(value)]="chartType" [header]="'Chart Type'">
    
12.     <wj-menu-item [value]="ChartType.Column">Column</wj-menu-item>
    
13.     <wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
    
14.     <wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
    
15. </wj-menu>

复制代码

这里的菜单项值定义为真正的枚举值，菜单值属性绑定到图表的双向图图表类型通过组件的ChartType属性属性。

个工作示例可以在这里找到。