数据显示在控制台中，但不在网站 Angular 中

Question

这是我的 ngOnInit 方法：

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

我的控制台： enter image description here

我的 HTML：

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

我正在尝试使用我的本地主机上的 api，我想知道为什么它在控制台上可以工作，但在前端 html 中却没有。

Answer 1

您的 API 可能会花时间加载数据，因此当 API 调用获取数据时，它将在控制台中打印数据，但在此之前您的 HTML 会在浏览器上呈现，因此您需要在 *ngFor 之前使用 *ngIf。

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