Ahora tengo una matriz de declaración como:

public invoices: IInvoice[] = [];

A continuación se completa con los datos de la respuesta:

 private load(): void {
    this.invoiceService.get().subscribe((data: any) => {
      this.invoices = data;
    });
  }

Entonces, en la plantilla tengo:

<div class="alert alert-fill-warning" *ngIf="invoices.length == 0"></div>

El problema es que mientras el servidor devuelve datos, se muestran estos mensajes, porque por defecto la matriz está vacía. Cómo mostrar este mensaje solo cuando en realidad no hay datos en respuesta.

-1
OPV 11 may. 2019 a las 02:13

4 respuestas

La mejor respuesta

Puede usar la sintaxis de plantilla invoice$ | async as invoices; else loading para suscribirse a un observable, pero mostrar un mensaje de carga hasta que se emitan los datos. Después de cargar las facturas, puede mostrar la advertencia si la matriz está vacía.

public invoices$: Observable<IInvoice[]>;

private load(): void {
   this.invoices$ = this.invoiceService.get();
}

<ng-container *ngIf="invoices$ | async as invoices; else loading">
    <div class="alert alert-fill-warning" *ngIf="invoices.length === 0"></div>
</ng-container>
<ng-template #loading">
    Invoices are loading...
</ng-template>

El else loading es opcional. Puede dejar esta área en blanco si lo desea hasta que se lean las facturas.

2
Reactgular 11 may. 2019 a las 00:45

¿Es necesario establecer el valor predeterminado en una matriz vacía? ¿Por qué no configurarlo como nulo y solo cambiarlo al recibir datos del servidor? Luego, puede cambiar su condición para que la alerta verifique el valor no nulo que tiene una longitud de cero.

1
Bahaa 10 may. 2019 a las 23:21

Puede hacer que las facturas sean opcionales y verificar si está definido y vacío

public invoices?: IInvoice[];

...

*ngIf="invoices && invoices.length === 0"

O, alternativamente, use un indicador, como isFetchingData para indicar que hay una recuperación del servidor en curso, y use esto en su cláusula *ngIf.

El enfoque de bandera es probablemente más obvio para el lector en cuanto a lo que está sucediendo, así como evitar verificaciones nulas adicionales en otras partes del código si está utilizando strictNullChecking en su tsconfig

2
Michael 10 may. 2019 a las 23:20

Este código funcionará:

public invoices: IInvoice[];

Y

private load(): void {
this.invoiceService.get().subscribe((data: any) => {
  this.invoices = data;
});
}

El código de la plantilla está bien.

-1
Max Hesari 15 may. 2019 a las 04:37