温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to fetch typical json data using Angular
angular fetch javascript json typescript

javascript - 如何使用Angular获取典型的json数据

发布于 2020-03-27 16:14:40

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"} ] } ]

上面是我的源代码,您可以看到我想通过成功获取项目名称来获取数据,但是名为“ technologies”的对象有子对象,因此如果有任何错误,我该如何获取它们。 ??

查看更多

查看更多

提问者
Saif Warsi
被浏览
72
deelde 2020-01-31 17:18

projects.technologies也是一个数组,因此您还需要遍历它们。

fe:

<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>