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

Question

我尝试了很少的技术，但仍然无法弄清楚，因此使用角度*ngFor循环显示此数据的最佳方法是什么

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

Answer 1

您实际上不需要嵌套的ngFor，您可以按以下方式使用它，

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

STACKBLITZ DEMO

Answer 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数据。