在角度模板中动态读取枚举值答案

【问题标题】：Reading enum values dynamically in angular template在角度模板中动态读取枚举值
【发布时间】：2021-07-04 21:51:57
【问题描述】：

我正在开发一个 Angular 应用程序。我有一个枚举如下

export class myEnum {
  "status1" = 1,
  "status2"  = 2,
  "status3"  = 3,
  "status4" = 4,
  "status5" = 5
 }

在我的 html 中，我有一个来自 api 的数据，我正在使用 *ngFor 来显示它，如下所示：

<div>*ngFor="let mydata of data"</div>

现在这个数据将有一个整数状态字段（可以使用 {{mydata.status}} 访问），它将与上述枚举匹配。在我的 html 中，我想传递/匹配这个数字并将其显示为字符串。假设从 API 中，如果状态为 4，那么我想要一个代码，我在其中传递这个值，它应该在枚举中匹配它并在屏幕上显示“status4”。我该怎么做？

【问题讨论】：

标签： angular angular8 angular9

【解决方案1】：

您对 *ngFor 循环使用了不正确的语法。

您的模板代码将是 -

<div *ngFor="let mydata of data">
  {{status[mydata]}}
</div>

并且在.ts文件中，可以使用一个const对象作为查找对象，这样就可以直接通过key访问值。在 Enums 中不能有数字键，因此在这里使用对象可能是一个简单而有效的选择。

你可以写成-

const statusLookup = {
    1:'status1',
    2:'status2',
    3:'status3',
    4:'status4',
    5:'status5'
  }

如果您出于任何其他特定原因仍想使用枚举，您可以使用自定义管道（从枚举中按值获取键）并将其插入模板中。

【讨论】：

【解决方案2】：

您的组件必须看起来像这样

import { Component } from '@angular/core';

export enum StatusEnum{
   offline = 1,
   online = 2
}

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


export class AppComponent  {

  public statusEnum = StatusEnum;
  
  public data = [
    {
      id: 1,
      status: 1
    },
    {
      id: 2,
      status: 2
    }
  ]
}

那么在您看来，您可以这样做：

<div *ngFor="let d of data">
  <p>{{statusEnum[d.status]}}</p>
</div>

看看这个：https://stackblitz.com/edit/angular-ivy-enum-in-template

ps：为了清楚起见，我将枚举命名为 StatusEnum！

【讨论】：