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

I'm new to angular, I have an overview page that fills with a table if an array has any object. But when I tried to do this calling and API to get the data it doesn't retrieve anything.

This is my component.

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
}

}

Even though I call my method first showing me an empty array, the log after it comes first and after that the logs of the method with the object I was expecting.

This is the method of the service

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

The code of my view, when I hardcode the array it worked perfectly.

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

And this is a screenshot showing how enters first the one after the method, and my empty table Empty table