如何显示嵌套Web服务数组中的数据(角度4) [英] How to show data from nested web service array (Angular 4)

问题描述

我做了一个从Web服务API提取数据的项目. 但是Web服务也需要显示嵌套数组，我如何从嵌套JSON数组访问数据?在HTML内编写以从Web服务获取数据的正确方法是什么. 顺便说一下，当我获取第一个对象时，它只能在嵌套对象中正确显示.

这是Postman的回复屏幕截图

这是API链接

这是Stackblitz上项目的链接

单击不使用用户名或密码的登录名，然后单击任何学校，然后单击部门. 部门是我要问的部分.

解决方案

如果我没记错的话，您就有可用的数据. 只需使用点即可获得所需的数据: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.

I made a project to pull data from web service API. But the web service has nested arrays that needs to be displayed too, how can i access the data from nested JSON arrays?, what is the right way to write inside the HTML to get the data from the web service. By the way when i fetch the first objects it shows correctly, only in the nested objects.

This is the response screenshot from Postman

This is the API link

This is the link of the project on Stackblitz

Click on sign in without user or password, then any school, then divisions. divisions component is the one i'm asking about.

解决方案

If I remember correctly, you have the data available. Just use the dots to reach the data you need: response.data[0].grade[0].classes[1].grade_id

In the template you can do this:

<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>

In your component you can start with this:

<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>

Note that you can't use two structural (with *) directives in one tag, hence the ng-container.

这篇关于如何显示嵌套Web服务数组中的数据(角度4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！