如何在 Angular 7 中使用 ngFor 显示嵌套的 json 数据答案

【问题标题】：How to show nested json data using ngFor in Angular 7如何在 Angular 7 中使用 ngFor 显示嵌套的 json 数据
【发布时间】：2019-04-03 17:14:17
【问题描述】：

我尝试了一些技术，但仍然无法弄清楚，那么使用 angular *ngFor 循环显示这些数据的最佳方式是什么

  "data": {
    "live": [
      {
        "name": "First",
        "image": "XXXX",
        "description": "Blockchain Technology",
        "timezone": "UTC+0"
      },
      {
        "name": "First",
        "image": "XXXX",
        "description": "Blockchain Technology",
        "timezone": "UTC+0"
      }
    ]
  }
}

【问题讨论】：

ngFor to iterate json sub array with unknown keys的可能重复
在这里回答stackoverflow.com/a/52462137/4868839
你可以试试<div *ngFor="let h of data.live">{{h.name}}</div>

标签： angular

【解决方案1】：

其实你不需要嵌套的ngFor，你可以按如下方式使用，

<ul>
    <li *ngFor="let myObj of myData.data.live">
      {{ myObj.description }}
    </li>
</ul>

STACKBLITZ DEMO

【讨论】：

【解决方案2】：

试试这个希望它会帮助你。在您的 component.ts 文件中访问 JSON 文件中的数据，如下所示。

yourdata: any = [];

this.httpService.get('./assets/yourjsonfile.json').subscribe(
       data => {
          this.yourdata = data as string [];
        },
        (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );

然后在您的component.html文件中尝试访问我们在component.ts文件中声明的yourdata变量的内容，如下所示。

<div *ngFor="let Data of yourdata>
   {{ Data.data.live.name}}
   {{ Data.data.live.image}}
   {{ Data.data.live.description}}
   {{ Data.data.live.timezone}}
</div>

它将在您的 UI 应用程序上打印您的 JSON 数据。

【讨论】：