Data is shown in the console but not in the website Angular-CodePudding

This is my ngOnInit method:

async ngOnInit() {
    
    return this.http.get(this.apiserver.apiUrl   'negocios/listadoTodos/?negocio=1').subscribe(async (todos:any) => {
        this.detalles = todos;
        console.log(this.detalles);
        
      });
    
}

My console: enter image description here

My Html:

<div class="text-lg font-bold leading-none" *ngFor="let item of detalles">{{item.nombre}} - {{item.sector}}</div>

Im trying to use an api that is on my localhost and idk why at the console it is working but not in the frontend html.

CodePudding user response：

Your API might tacking time to load data so when API call get data it will print data in console but before that your HTML render on browser, so you need to use *ngIf before you *ngFor like this.

<div *ngIf="detalles.length">    
    <div class="text-lg font-bold leading-none" *ngFor="let item of detalles"> 
         {{item.nombre}} - {{item.sector}}
    </div>
</div>