在 Angular 模板中使用 TypeScript 枚举
枚举是TypeScript提供的一项便捷功能。枚举允许您使用有意义的名称（而不是在这种情况下通常使用的数字常量）从预定义的一组值中指定可能的属性值。例如，我们可以使用以下代码行指定FlexChart.chartType属性值：chart.chartType = ChartType.Column;Angular 枚举但是，Enum类型属性的问题出现在Angular模板中，您可能需要在其中指定其值，但不能这样做。唯一的方法是使用与枚举成员相对应的数字常量，但是这种方法会产生不清楚的标记，并且找出它们的值可能很烦人：<wj-flex-chart ="2" …>问题的根源在于，除了Angular模板表达式中的组件属性外，无法引用任何内容。但是，这些属性仍然可用，因此让我们利用它吧！我们可以仅添加一个存储对必要的Enum类型的引用的属性，例如此处的ChartType属性：import * as wjcChart from 'wijmo/wijmo.chart';
…
export class AppCmp {
ChartType = wjcChart.ChartType;
现在我们可以在模板绑定中引用枚举成员：<wj-flex-chart ="ChartType.Column" …>Wijmo枚举类型属性
请注意，当涉及Wijmo组件时，此问题并不那么严重，您可以在其中将枚举成员的字符串名称分配给属性。此方法将起作用，因为所有Wijmo枚举类型属性都可以将此类字符串转换为实际的枚举值。例如：<wj-flex-chart =" 'Column' " …>但是，在双向绑定的情况下，此方法可能会引起问题。例如，如果要将可能的图表类型的菜单绑定到图表的chartType属性。您可能会得到其中一种可爱的“检查后表达式已更改”异常，或者所选菜单项不会显示在菜单标题中。使用真实枚举值的代码不会出现以下潜在问题：Component:
chartType = wjcChart.ChartType.Column;
Template:
<wj-flex-chart ="data"
="chartType"
="'country'"
style="height: 200px">
<wj-flex-chart-series ="'Downloads'" ="'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-menu [(value)]="chartType" ="'Chart Type'">
<wj-menu-item ="ChartType.Column">Column</wj-menu-item>
<wj-menu-item ="ChartType.Scatter">Scatter</wj-menu-item>
<wj-menu-item ="ChartType.Line">Line</wj-menu-item>
</wj-menu>这里的菜单项值定义为真正的枚举值，菜单值属性绑定到图表的双向图图表类型通过组件的ChartType属性属性。个工作示例可以在这里找到。
页:
[1]