时间戳

首页 > 解决方案 > 如何在 html 中显示从 API 调用的数组的值？

angular - 如何在 html 中显示从 API 调用的数组的值？

问题描述

这是我从 API 得到的 json 的接口。

        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>

现在它会向我显示名称、命中和 url，但对于子类，它会显示 Object 对象。如何显示这个数组的值，特别是名称？ 例子

标签： angulartypescript

解决方案

显示子类名称的一种简单方法是使用ngFor循环它们并显示它们的名称：

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

推荐阅读