After retrieving an array of objects with various properties from a .NET Controller, I am utilizing the following Typescript code:
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;
}
The HTML template structure is as follows:
<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>
While attempting to display the gender names instead of numbers, using {{ Gender[celebrety.gender] }} resulted in an undefined error. Why do you think the enum is not recognized within the Angular brackets?