Question

这在下面得到了回答：

我一直无法通过简单的假JSON呈现API结果。 JSON位于此端点：https://testapi.io/api/crimsonsunset/code-challenge-jobs

我的service.ts如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getJobs() {
    return this.http.get('https://testapi.io/api/crimsonsunset/code-challenge-jobs')
  }
}

我的home.component.ts如下：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  jobs: Object;

  constructor(private data: ApiService) { }

  ngOnInit() {
    this.data.getJobs().subscribe(data => {
      this.jobs = data
      console.log(this.jobs)
    })
  }

}

我的home.component.html如下：

<div class="bg">

<h1 class="header">Welcome to your next big role</h1>

<app-search></app-search>

<div style="padding: 20px;">

    <mat-card *ngFor="let job of jobs.data" style="margin-top:10px;">
            <mat-card-header>
            <mat-card-title >The role: {{job.title}}</mat-card-title>
            <mat-card-subtitle>{{job.city}} , {{job.state}}
            </mat-card-subtitle>
        </mat-card-header>

        <mat-card-content>
        <mat-accordion>
            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
            <mat-expansion-panel-header>
                <mat-panel-description>
                    Full Description:
                </mat-panel-description>
            </mat-expansion-panel-header>
                <p>Info from JSON</p>
            </mat-expansion-panel>
        </mat-accordion>
        </mat-card-content>
    </mat-card>
</div>
</div>

我觉得我只是在犯一个简单的语法错误以呈现数据。它可以console.log正确地整理所有内容。似乎看不到HTML文件上data在jobs.data中的位置。

Answer 1

为清楚起见，您可以通过这种方式编辑服务电话

this.data.getJobs().subscribe(response => {
  this.jobs = response['jobs'];
  console.log(response);
})

现在在您的HTML中，

<mat-card *ngFor="let job of jobs" style="margin-top:10px;">
    <mat-card-header>
        <mat-card-title >The role: {{job['data'].title}}</mat-card-title>
        <mat-card-subtitle>{{job['data'].city}} , {{job['data'].state}}
        </mat-card-subtitle>
    </mat-card-header>

推荐方法

即使以上代码解决了您的问题，也不推荐使用这种方法来处理数据。该API确实看起来很复杂。在这种情况下，您可能必须直接修改数据。

this.data.getJobs().subscribe(response => {
    let job: any = {};
    response['jobs'].forEach(element => {
        let keys:any = Object.keys(element.data);
        keys.forEach(function(key) {
            job[key] = element.data[key];
        });
        this.jobs.push(job);
    });
});

在HTML 中，

<mat-card *ngFor="let job of jobs.data" style="margin-top:10px;">
    <mat-card-header>
        <mat-card-title >The role: {{job.title}}</mat-card-title>
        <mat-card-subtitle>{{job.city}} , {{job.state}}
        </mat-card-subtitle>
    </mat-card-header>
</mat-card>

Angular API渲染问题

1 个答案: