在 Angular 模板中使用 TypeScript 枚举

收藏

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

复制代码

Angular 枚举

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

复制代码

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

复制代码

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

复制代码

Wijmo枚举类型属性

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

复制代码

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

Component:
chartType = wjcChart.ChartType.Column;
Template:
<wj-flex-chart [itemsSource]="data"
[chartType]="chartType"
[bindingX]="'country'"
style="height: 200px">
<wj-flex-chart-series [name]="'Downloads'" [binding]="'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-menu [(value)]="chartType" [header]="'Chart Type'">
<wj-menu-item [value]="ChartType.Column">Column</wj-menu-item>
<wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
<wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
</wj-menu>

复制代码

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

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

		自动登录	找回密码
密码			立即注册

0 个回复