在Angular模板中使用TypeScript Enums

枚举（或枚举类型）是 TypeScript 支持的一种数据类型。枚举允许您定义一组命名常量，这些常量与关联的数字常量绑定，并且可以代替这些数字常量使用。

假设我们想要创建一个名为 Direction 的枚举，它具有四个基本方向的值。这看起来像这样

enum Directions {
  North = 1,
  South = 2,
  East = 3,
  West = 4
}

现在，如果您想引用其中一个数字值，可以使用关联的命名常量，如下所示

currentDirection = Directions.North;

Angular 中的枚举

然而，在使用 Angular 模板中的枚举类型属性时会出现一个问题。模板只能接受数字常量，而不能接受命名常量。这可能会产生不清晰的标记，并且使弄清楚使用哪个值变得更加困难。

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

正如您所看到的，仅根据标记中的数字枚举，我们无法清楚地知道我们正在初始化哪种类型的图表。这个问题的原因是模板不能接受不是组件属性的值作为模板表达式。但是，由于枚举命名常量仍然可用，我们可以通过将它们的值与 TypeScript 中的变量关联来利用它们

import * as wjcChart from '@grapecity/wijmo.chart';
…
export class AppComponent {
  chartType = wjcChart.ChartType;
}
  ChartType = wjcChart.ChartType;

在这里，我们将 ChartType 枚举设置为组件内部的 chartType 变量。现在我们能够在模板绑定中通过命名常量引用枚举成员

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

Wijmo 枚举类型属性

Wijmo 中的枚举比标准的 Angular 模板更容易使用，因为 Wijmo 组件允许您将枚举的字符串名称直接分配给属性。这是因为 Wijmo 组件被构建为能够将这些字符串转换为它们的数字枚举值。

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

但是，如果计划实现双向绑定，这种方法仍然会导致问题。例如，假设您想要将菜单绑定到 FlexChart 控件，以便用户可以更改显示的图表类型。在使用命名常量时，您可能会收到“表达式在被检查后已更改”异常，或者菜单标题可能不会显示所选菜单项。在这些情况下，您仍然需要将枚举与组件属性关联

Component:
chartType = 'Column';

Template:
<wj-flex-chart [itemsSource]="data" [chartType]="chartType" [bindingX]="'country'">
  <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.Bar">Bar</wj-menu-item>
    <wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
    <wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
</wj-menu>

这里的菜单项值定义为真实的枚举值，并且菜单 value 属性通过组件的 chartType 属性双向绑定到图表的 chartType 属性。

Angular 模板中的枚举属性

可以在 这里 找到完整的示例。

正在寻找一套 Angular UI 组件？Wijmo 的组件库拥有一整套 Angular UI 组件，包括 数据网格、图表、仪表、电子表格和 输入 控件。您可以在 这里 了解有关 Wijmo Angular 库的更多信息。