Angular CLI 对象在 api 调用后不更新

Question

我是 angular 的新手，我有一个概述页面，如果数组有任何对象，该页面会填充 table。但是当我尝试执行此调用并 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>

这是一个屏幕截图，显示了如何先进入方法后的方法，以及我的空 table Empty table

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

以防有人遇到同样的问题。

Angular CLI 对象在 api 调用后不更新

Angular CLI object doesn't update after the call of the api

visual-studio-code

angular-cli