在 Angular2 视图模板中使用枚举

Question

有趣的问题。我需要使用带有枚举的 Angualar4 模板。

又名

<div class="small-12 columns compliance-freq__item"
             [ngClass]="getComplianceFrequencyClasses( complianceFrequency, LicenceComplianceFrequency.QUARTERLY)"</div>

注意

LicenceComplianceFrequency.QUARTERLY

枚举声明如下

export enum LicenceComplianceFrequency {
    QUARTERLY               = "QUARTERLY",
    MONTHLY                 = "MONTHLY"
}

这给我一个模板错误，

无法读取未定义的属性个季度。

我已经尝试通过修改组件本身以多种方式将其与模板集成。

1) 模板中仍有四分之一的未定义错误

get LicenceComplianceFrequency() {
    return LicenceComplianceFrequency;
}

2)（尖叫 LicenceComplianceFrequency 不是文件 *.ts 的可导出元素）

import {LicenceComplianceFrequency} from '....';
public LicenceComplianceFrequency = LicenceComplianceFrequency;

有什么建议吗？

Answer 1

抱歉，我自己已经找到了答案。

以下使用模板。我必须以这种方式声明它并且不能在全局范围内使用枚举，这并不好，但是...

将这段代码放在组件中

import * as LicenceComplianceFrequency from '...';
public LicenceComplianceFrequency = LicenceComplianceFrequency;

然后就可以在模板中使用了，如下所示

<div class="compliance__item">{{ LicenceComplianceFrequency.QUARTERLY }}</div>

编辑

在较新的 Angular 版本中，可以这样做

import {LicenceComplianceFrequency} from "../../shared/enums/licence-compliance-frequency.enum";
public LicenceComplianceFrequency = LicenceComplianceFrequency;

在模板中使用它和以前一样

<div class="compliance__item">{{ LicenceComplianceFrequency.QUARTERLY }}</div>

在 Angular2 视图模板中使用枚举

Using enums in Angular2 view templates

angular2-template

angular

编辑