如何使用 Angular 獲取典型的 json 數據

Question

 import { Component, OnInit } from '@angular/core'; import { ResumedataService } from "../../services/resumedata.service"; @Component({ selector: 'app-projects', templateUrl: './projects.component.html', styleUrls: ['./projects.component.scss'] }) export class ProjectsComponent implements OnInit { projectdata: any = []; constructor(private resumeservice: ResumedataService) {} ngOnInit() { // service call this.resumeservice.getresumedata().subscribe(data => (this.projectdata = data.projects)); } }

 <div *ngFor="let item of projectdata"> <h5>{{item.projectName}}</h5> <span>{{item.technologies.tech}}</span> </div> //******this is jason data******* "projects": [ { "id":1, "projectName": "Flight Reservation System", "technologies": [ {"tech":"html"}, {"tech":"css"}, {"tech":"javascript"}, {"tech":"jquery"}, {"tech":"sql"}, {"tech":"angular"} ] }, { "id":2, "projectName": "Train Reservation System", "technologies": [ {"tech":"html"}, {"tech":"css"}, {"tech":"javascript"}, {"tech":"jquery"}, {"tech":"sql"}, {"tech":"angular"} ] } ]

上面是我的源代碼，你可以看到我想通過獲取數據，因為我成功地獲得了項目的名稱，但名為“技術”的對象有孩子，所以如果有任何錯誤，我如何獲取他們看看.. ??

Answer 1

只需使用另一個*ngFor ：

<div *ngFor="let item of data">
  {{item.projectName}}
  <br />
  <ul *ngFor="let t of item.technologies">
    <li>{{t.tech}}</li>
  </ul>
  </div>

https://stackblitz.com/edit/angular-3xsmgy?file=src/app/app.component.html

希望能幫助到你！

Answer 2

projects.technologies 也是一個數組，因此您還需要遍歷它們。

鐵：

<div *ngFor="let item of projectdata">
  <h5>{{item.projectName}}</h5>
  <ng-container *ngFor="let technologie of item.technologies">
    <span>{{technologie.tech}}</span>
  </ng-container>
</div>