在 *ngIf 的 Angular 8 HTML 模板中使用枚举答案

【问题标题】：Use of Enums in Angular 8 HTML template for *ngIf在 *ngIf 的 Angular 8 HTML 模板中使用枚举
【发布时间】：2020-04-04 22:19:52
【问题描述】：

如何在 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

【问题讨论】：

“不起作用”到底是什么意思？
ERROR 错误：无法读取未定义的属性“someValue”
你试过在TS中创建public get SomeEnum() {return SomeEnum; }，然后在HTML中使用ngIf="SomeEnum.someValue"
供以后参考，官方repo中已经有一个open feature request：github.com/angular/angular/issues/33652

标签： html angular typescript enums

【解决方案1】：

在 TS 中

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

在 HTML 中使用

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

编辑：时间流逝，我们作为开发人员了解更多，我现在使用的方法不使用get 方法。两种解决方案都有效，只需选择您最喜欢的一种即可。

在 TS 中

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

在 HTML 中使用

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

【讨论】：

哇，这可能是更干净的方法。喜欢你的回答。
虽然不推荐使用getters。它们花费了很多性能。因此，getter 函数在每次 Angular 执行变更检测时运行。现在，我并不是说仅运行此功能会降低性能。但这为某人在getter 中添加一些逻辑留下了空间，这可能会导致性能下降。只是说。 ?
@SiddAjmera 我不知道这个性能问题，你能告诉我们搜索的来源吗？我将它用于枚举，因为它们在代码中看起来更干净。谢谢！
嗯。好吧。只需在getter 中放置一个console.log 并使用[(ngModel)] 在您的模板中输入一个输入，或者只需运行this StackBlitz 并查看控制台:)
这是由ngIf 触发的，而不是getter 本身。 ngIf 也会查看变量，但你无法安慰他们哈哈哈。

【解决方案2】：

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

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

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

【讨论】：

如果枚举在其他地方可用，最好将它放在单独的文件中。然后简单地将其作为属性导入组件中。
是的，我就是这个意思。您不必在与组件相同的文件中声明枚举。我已经编辑了我的答案。
但是，使用 StrictTemplating 这种方式会被标记。如果您知道解决方法，我会全力以赴！

【解决方案3】：

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

someEnum = SomeEnum;

那么你就可以像这样在你的模板中使用引用了

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

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

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

【讨论】：

【解决方案4】：

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

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>

这里有一个Working Demo 供您参考。

【讨论】：