在 Angular 8 HTML 模板中为 *ngIf 使用枚举

Question

如何在 Angular 8 模板中使用枚举？

组件.ts

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
}

组件.html

<span *ngIf="name === SomeEnum.someValue">This has some value</value>

这目前不起作用，因为模板没有引用SomeEnum. 我该如何解决？

ERROR Error: Cannot read property 'someValue' of undefined

Answer 1

在 TS

public get SomeEnum() {
   return SomeEnum; 
}

在 HTML 中使用

*ngIf="SomeEnum.someValue === 'abc'"

Answer 2

我认为如果您不想用不必要的逻辑使您的类膨胀，这将是更简单的解决方案之一。我会避免调用函数来返回枚举，因为它会在每次重新渲染时被调用，并且如果大量使用它会影响您的性能。

public readonly myEnum : typeof MyEnum = MyEnum;

Answer 3

您必须首先将其声明为属性：

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
  importedSomeEnum = SomeEnum;
}

然后在模板中使用它：

<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>

这是供您参考的工作演示。

Answer 4

您可以将等于SomeEnum枚举的字段（它可以从另一个文件导入）声明为组件文件中的公共类字段。然后它将可以在模板中访问。

// component 
export class AppComponent  {
  name = SomeEnum.someValue;
  enum = SomeEnum;
}

// template
<span *ngIf="name === enum.someValue">This has some value</value>

Answer 5

是的，模板不能直接引用枚举。有几种方法可以做到这一点。1. 将 Enum 引用添加到组件 ts 文件中，如下所示

someEnum = SomeEnum;

然后您将能够像这样使用模板中的引用

<span *ngIf="name === someEnum.someValue">This has some value</value>

2. 第二种方法是从模板中调用函数，并以名称作为参数，并在打字稿文件中进行比较

<span *ngIf="checkCondition(name)">This has some value</value>