如何显示嵌套Web服务数组中的数据（Angular 4）

Question

我制作了一个从Web服务API中提取数据的项目。 但是Web服务还有嵌套的数组，需要显示，我如何从嵌套的JSON数组中访问数据？在HTML中编写内容以从Web服务获取数据的正确方法是什么。 顺便说一句，当我获取它正确显示的第一个对象时，仅在嵌套对象中。

这是Postman的回复截图

This is the API link

Stackblitz项目的

This is the link

点击登录，无需用户或密码，然后点击任何学校，然后是部门。 divisions组件是我要问的那个。

Answer 1

如果我没记错的话，您可以获得数据。 只需使用点来获取所需的数据：response.data [0] .grade [0] .classes [1] .grade_id

在模板中，您可以执行此操作：

<div *ngFor="let division of divisionList">
    <div *ngFor="let grade of division.grade">
        <div *ngFor="let class of grade.classes">
            <span>{{ class.grade_id }}</span>
        </div>
    </div>
</div>

在您的组件中，您可以从这开始：

<ng-container *ngIf="divisionList">
    <button name="American Primary"  
        *ngFor="let division of divisionList"
        class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1">
           {{division.name}}
         <i class="fa fa-arrow-right pull-right arrow-down-onclick1" 
            aria-hidden="true" style="margin-top:12px"></i>
    </button>
    <a routerLink="/editaisdivision" 
        style="text-decoration: none;">
       <span class="fa fa-pencil pen-pen-pen" aria-hidden="true" 
             style="margin-left: 10px; color: #171b5e;"></span>
     </a>
</ng-container>

请注意，您不能在一个标记中使用两个结构（带*）指令，因此使用ng-container。

Answer 2

使用JSON.parse(JSON_STRING)，您将获得一个代表JSON中数据的JavaScript对象。