Как проверить, нет ли данных в массиве и показать сообщение?

Question

Теперь у меня есть массив объявлений как:

public invoices: IInvoice[] = [];

Ниже он заполнен данными из ответа:

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

Итак, в шаблоне у меня есть:

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

Проблема в том, что, когда сервер возвращает данные, это сообщение отображается, потому что по умолчанию массив пуст.Как показать это сообщение, только когда на самом деле нет данных в ответе.

Answer 1

Синтаксис шаблона invoice$ | async as invoices; else loading можно использовать для подписки на наблюдаемое, но отображать загрузочное сообщение до тех пор, пока данные не будут отправлены. После загрузки счетов вы можете отобразить предупреждение, если массив пуст.

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>

else loading необязательно. Вы можете оставить это поле пустым, если хотите, до тех пор, пока счета не будут прочитаны.

Answer 2

Вы можете сделать накладные необязательными и проверить, определен ли он как пустой.

public invoices?: IInvoice[];

...

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

Или, альтернативно, использовать флаг, например isFetchingData, чтобы указать, что идет выборка с сервера.и используйте это в своем предложении *ngIf.

Подход с использованием флага, вероятно, более очевиден для читателя относительно того, что происходит, а также позволяет избежать дополнительных нулевых проверок в других частях кода, если выиспользуя strictNullChecking в вашем tsconfig

Answer 3

Нужно ли устанавливать значение по умолчанию для пустого массива? Почему бы не установить его на ноль, а только изменить его при получении данных с сервера. Затем вы можете изменить свое состояние, чтобы оповещение проверяло ненулевое значение длины ноль.

Answer 4

Этот код будет работать:

public invoices: IInvoice[];

и

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

Код шаблона в порядке.