如何在Angular 7中使用ngFor顯示嵌套的json數據

Question

我嘗試了幾種技術，但仍然無法弄清楚，因此使用angular *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演示

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數據。