如何在綁定的 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]]

這顯然是多余的，因為您已經有了文本“男性”/“女性”/“未知”

它看起來有點古怪，因為枚舉是要在編譯時插入到代碼中，而不是用作對象。