En mi proyecto Angular donde obtengo datos de la API y los muestro en la interfaz. Estoy usando ngIf para mostrar datos, si no hay datos disponibles, se muestra elseNotDone .
El problema al que me enfrento es cuando el componente se recarga, primero veo No Data available durante unos milisegundos y luego se muestran los datos.
¿Cómo puedo asegurarme de que otra condición no se muestre en el renderizado inicial?
<section *ngIf="data!== undefined && data.length > 0; else elseNotDone"> <h2>Amazon Data</h2> <div> // display data from API </div> </section> <ng-template #elseNotDone> No Data available </ng-template>Esto se debe a que el componente se inicializa antes de que lleguen los datos. Una vez que llegan los datos, el componente puede usarlos.
Recomiendo encarecidamente aprender sobre los solucionadores angulares que evitan que el componente se inicialice antes de que los datos estén disponibles. Esto le permite implementar cosas como cargadores/spinners/etc., que aparecen mientras se obtienen los datos.
EDITAR: De la documentación de Angular: https://angular.io/api/router/Resolve
Innecesariamente lo complicaste:
*ngIf="data !== undefined && data.length > 0; else elseNotDone"cambiarlo a:
*ngIf="data && data.length > 0; else elseNotDone" Para su problema principal: cree una variable isLoaded y envuelva su código en ella:
<div *ngIf="isLoaded"> .... your code... </div>Resolverá su problema para mostrar cualquier cosa hasta que se carguen los datos.
Envuelva su código en el contenedor ng con la condición isLoaded y debe "verificar" esta variable si obtiene la respuesta de la API
<ng-container *ngIf="isLoaded"> <section *ngIf="data && data.length > 0; else elseNotDone"> <h2>Amazon Data</h2> <div> // display data from API </div> </section> <ng-template #elseNotDone> No Data available </ng-template> </ng-container>