在 Angular HTML 中使用枚举

Question

我有一个枚举，想在 Angular 13 组件中使用它。

枚举：

export enum PropertyCode {
  ALPHA = 'ALPHA',
  BETA = 'BETA',
  ZETA = 'ZETA',
}

TS:

import { Component, VERSION } from '@angular/core';
import { PropertyCode } from './property-code';

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

  isHidden(code: PropertyCode): boolean {
    switch (code) {
      case PropertyCode.ALPHA:        return false;
      case PropertyCode.BETA:        return true;
      case PropertyCode.ZETA:        return false;
    }
  }
}

HTML:

<ul>
  <li *ngIf="!isHidden(PropertyCode.ALPHA)">Alpha</li>
  <li *ngIf="!isHidden(PropertyCode.BETA)">Beta</li>
  <li *ngIf="!isHidden(PropertyCode.ZETA)">Zeta</li>
</ul>

结果：

沙盒here

但是，我不想在组件中创建一个对应于该枚举的属性...

对我来说没有任何意义，因为没有具体的信息要保留，我想使用HTML中的大写字母作为普通枚举。

所以我尝试了装饰器

import { PropertyCode } from './property-code';

export function PropertyCodeAware(constructor: Function) {
  constructor.prototype.PropertyCode = PropertyCode;
}

并装饰了组件，但这似乎没有帮助

@PropertyCodeAware
export class AppComponent {

Answer 1

您必须在 AppComponent

中创建属性

propertyCode = PropertyCode;

您可以在 app.component.html 模板中使用它

<ul>
  <li *ngIf="!isHidden(propertyCode.ALPHA)">Alpha</li>
  <li *ngIf="!isHidden(propertyCode.BETA)">Beta</li>
  <li *ngIf="!isHidden(propertyCode.ZETA)">Zeta</li>
</ul>

Answer 2

非常简单的解决方案，在 .component.ts

public get PropertyCode() {
  return PropertyCode; 
}

不需要装饰器（删除）

在 Angular HTML 中使用枚举

Enumerations use in Angular HTML

typescript

typescript-decorator

angular

angular13