【问题标题】：How to show data from nested web service array (Angular 4)如何显示来自嵌套 Web 服务数组的数据（Angular 4）
【发布时间】：2018-07-23 21:46:21
【问题描述】：
我做了一个项目来从 Web 服务 API 中提取数据。
但是 Web 服务也有需要显示的嵌套数组，我如何访问嵌套 JSON 数组中的数据？，在 HTML 中编写以从 Web 服务获取数据的正确方法是什么。
顺便说一句，当我获取它正确显示的第一个对象时，仅在嵌套对象中。
这是 Postman 的回复截图
This is the API link
This is the link Stackblitz 上的项目
点击没有用户名或密码的登录，然后是任何学校，然后是部门。
我要问的是部门组件。
【问题讨论】：
-
我认为您正在寻找嵌套的 *ngFor 指令。只要你知道数据的结构，你可以在你的模板中写一个*ngFor来处理第一个数组，然后在模板中写一个来处理二级数组。
-
-
-
-
标签：
json
angular
web-services
typescript
multidimensional-array
【解决方案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。
【解决方案2】：
使用JSON.parse(JSON_STRING)，您将获得一个表示 JSON 数据的 JavaScript 对象。