Angular 角度API渲染问题

答复如下：

我很难从一个简单的伪JSON呈现API结果。JSON位于该端点：

我的

service.ts

如下所示：

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
出口级服务{
构造函数（私有http:HttpClient）{}
getJobs（）{
返回此.http.get（'https://testapi.io/api/crimsonsunset/code-challenge-jobs')
}
}

我的

home.component.ts

如下所示：

从'@angular/core'导入{Component，OnInit}；
从“../services/api.service”导入{ApiService}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.scss']
})
导出类HomeComponent实现OnInit{
职务：对象；
构造函数（私有数据：ApiService）{}
恩戈尼尼特（）{
this.data.getJobs（）.subscribe（数据=>{
this.jobs=数据
console.log（this.jobs）
})
}
}

我的

home.component.html

如下所示：

欢迎来到你的下一个重要角色
角色：{{job.title}
{{job.city}，{{job.state}
详细说明：
来自JSON的信息

---

我觉得我只是在做一个简单的语法错误来呈现数据。这是

console.log

。似乎看不到

数据

在HTML文件的

作业中的位置。数据

。

为了清楚地理解，您可以用这种方式编辑服务调用

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>

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

角色：{{job.title}
{{job.city}，{{job.state}

您所说的“似乎……”到底是什么意思？这可能与控制台上的

console.log（This.jobs）

写入的内容重复。嗨@NicholasK，我得到了完整的JSON。{jobs:Array（10），totalCount:30，count:30，filter:{…}，languageCounts:{…}，{…}，{…}，count:30 filter:{displayLimit:10，categories:{…}，categories:{…}，experiencevels:{…}，locations:{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，{…}，类别：{…}，品牌：{…}，体验级别：{…}，locations:{…}，位置：{…}，{…}，{…}，{…}，位置：{…}，元数据：{ResponseMetadata:{…}request_id:false totalCount:30 proto:Objects一般来说，在描述问题时，你需要清楚它在做什么，这与你期望的不同。我不明白这个问题中的问题是什么。对于我@theMayer，回答得非常清楚。谢谢你谢谢@AngelaAmarapala。我仍然收到一个错误，它无法读取属性未定义的“数据”。是的！谢谢@AngelaAmarapala！我自己肯定不会想出这个语法。非常感谢。很高兴这对你有帮助！

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