调用 api 后 Angular CLI 对象不更新答案

【问题标题】：Angular CLI object doesn't update after the call of the api调用 api 后 Angular CLI 对象不更新
【发布时间】：2019-12-03 23:42:38
【问题描述】：

我是 Angular 的新手，如果数组有任何对象，我有一个用表格填充的概览页面。但是当我尝试执行此调用和 API 来获取数据时，它不会检索任何内容。

这是我的组件。

export class OverviewComponent implements OnInit {
constructor(private portalApiService: PortalApiService) { }
puddingName = 'PuddingStreet Talent Pipeline';
slogan = 'We Recruit, You Hire!';
competencies: Competency[] = [];


getCompetencies(){
 this.portalApiService.getCompetencies().subscribe((data: Competency[]) => {
   this.competencies = data;
   console.log(data)
   console.log(this.competencies);
  });
}

ngOnInit() {
 this.getCompetencies();
 console.log(this.competencies);//this log comes first
}

}

即使我首先调用我的方法，向我显示一个空数组，但它之后的日志首先出现，然后是我所期望的对象的方法的日志。

这是服务的方法

getCompetencies(): Observable<Competency[]>{
 return this.http.get<Competency[]>(this.apiUrl + this.getCompetenciesUrl);
}

我认为的代码，当我对数组进行硬编码时，它工作得很好。

<div id="main">
<table>
    <caption>Insights</caption>
    <tr>
        <th>Competency</th>
        <th># Candidates</th>
        <th># of Completed Assesments</th>
    </tr>
    <tr *ngFor="let competency of competencies">
        <td>{{competency.Name | uppercase}}</td>
        <td>{{competency.Candidates}}</td>
        <td>{{competency.CompletedAssessments}}</td>
    </tr>
</table>
</div>

这是一个屏幕截图，显示了如何在方法之后输入第一个，以及我的空表 Empty table

【问题讨论】：

标签： visual-studio-code angular-cli

【解决方案1】：

在寻求帮助后，我的朋友让我意识到来自 API 答案的属性是小写的。

方法没有错，只是在视图中修复它。

<div id="main">
<table>
    <caption>Insights</caption>
    <tr>
        <th>Competency</th>
        <th># Candidates</th>
        <th># of Completed Assesments</th>
    </tr>
    <tr *ngFor="let competency of competencies">
        <td>{{competency.name | uppercase}}</td>
        <td>{{competency.candidates}}</td>
        <td>{{competency.completedAssessments}}</td>
    </tr>
</table>
</div>

如果有人遇到同样的问题。

【讨论】：