在 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"
}

这给了我一个模板错误，

无法读取未定义的 QUARTERLY 属性。

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

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>