Как показать значения массива, который я вызываю из API, в html?

Question

Это интерфейс json, который я получаю от API.

        export interface Subclass {
            url: string;
            name: string;
        }
        export interface TheClass {
            index: string;
            name: string;
            hit_die: number;
            subclasses: Subclass[];
            url: string;
        }

{"_id":"5ecc9ace0b1bb138c5431c12","index":"rogue","name":"Rogue","hit_die":8,"subclasses":[{"url":"/api/subclasses/thief","name":"Thief"}],"url":"/api/classes/rogue"}

В следующем коде я подписываюсь на API

  setFieldsClass(value: string){
    this.OnlineAPIService.getClasses(value).subscribe(data=>{
      this.TheClass = data;

Где GetClasses это следующее

 getClasses(value: string){
    return this.client.get<TheClass>("http://www.dnd5eapi.co/api/classes/"+value);
  }

<table *ngIf="TheClass">

        <tr>

            <th>name</th>
            <th>hit_die</th>
            <th>subclasses</th>
            <th>url</th>
        </tr>
        <tr  style="text-align:center">

            <td>{{TheClass.name}}</td>
            <td>{{TheClass.hit_die}}</td>
            <td>{{TheClass.subclasses}}</td>
            <td>{{TheClass.url}}</td>
        </tr>
</table>

Теперь он покажет мне имя, нажмите d ie и URL-адрес в порядке, но для подклассов он будет говорить Object object. Как я могу показать значения этого массива, в частности Name?

Answer 1

Простой способ показать имена подклассов - использовать над ними от ngFor до l oop и отображать их имена:

<td>
    <div *ngFor="let sc of TheClass.subclasses">{{ sc.name }}</div>
</td>

Answer 2

Я считаю, что это решит эту проблему. Обратите внимание, что я использую Bootstrap

https://stackblitz.com/edit/angular-ivy-e1ushq