如何在绑定的 Typescript 接口的 html Anguar 模板中显示枚举名称而不是值？

Question

我使用以下 Typescript 从 .NET Controller 获取具有某些属性的对象数组：

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public celebreties: Celebrety[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<Celebrety[]>(baseUrl + 'celebrety').subscribe(result => {
      this.celebreties = result;
    }, error => console.error(error));
  }
}
export enum Gender {
  Male = 0,
  Female = 1,
  Unknown = 2,
}
interface Celebrety {
  name: string;
  birthDate: Date;
  gender: Gender;
  role: string;
  imageUrl: string;
}

我的模板 html 是这样的：

<h1 id="tableLabel">Celebereties</h1>

<p *ngIf="!celebreties"><em>Loading...</em></p>

<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="celebreties">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birth Date</th>
      <th>Gender</th>
      <th>Role</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let celebrety of celebreties">
      <td>{{ celebrety.name }}</td>
      <td>{{ celebrety.birthDate }}</td>
      <td>{{ celebrety.gender }}</td>
      <td>{{ celebrety.role }}</td>
      <td><img src="{{ celebrety.imageUrl }}"/></td>
    </tr>
  </tbody>
</table>

这工作正常，但显示性别数字。 我试图显示名称而不是数字，但如果我使用：

<td>{{ Gender[celebrety.gender] }}</td>

它给出了一个未定义的错误。 为什么 angular 括号内的枚举未被识别？

Answer 1

我发现了一个黑客。 我写了一个返回值的 function，我从 html 调用它：

<h1 id="tableLabel">Celebereties</h1>

<p *ngIf="!celebreties"><em>Loading...</em></p>

<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="celebreties">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birth Date</th>
      <th>Gender</th>
      <th>Role</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let celebrety of celebreties">
      <td>{{ celebrety.name }}</td>
      <td>{{ celebrety.birthDate | date }}</td>
      <td>{{ GetGenderNameByValue(celebrety.gender) }}</td>
      <td>{{ celebrety.role }}</td>
      <td><img src="{{ celebrety.imageUrl }}" /></td>
      <td><button class="btn btn-primary" (click)="Delete()">Delete</button></td>
    </tr>
  </tbody>
</table>
<button class="btn btn-primary" (click)="Reset()">Reset</button>

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public celebreties: Celebrety[];

  public Reset() {
  }
  public Delete() {
  }
  public GetGenderNameByValue(value : number) {
    return Gender[value];
  }

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<Celebrety[]>(baseUrl + 'celebrety').subscribe(result => {
      this.celebreties = result;
    }, error => console.error(error));
  }
}
export enum Gender {
  Male,
  Female,
  Unknown,
}
interface Celebrety {
  name: string;
  birthDate: Date;
  gender: Gender;
  role: string;
  imageUrl: string;
}

Answer 2

枚举并不是为此而设计的； 但是，您可以这样做：

Object.keys(Gender)[Object.keys(Gender).length / 2 + celebrety.gender]

上面的代码假设 celebrety.gender 是一个数字（从枚举分配的值）如果它实际上是文本，你会这样做：

Object.keys(Gender)[Object.keys(Gender).length / 2 + Gender[celebrety.gender]]

这显然是多余的，因为您已经有了文本“男性”/“女性”/“未知”

它看起来有点古怪，因为枚举是要在编译时插入到代码中，而不是用作对象。