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子句中使用它。

对于正在发生的事情，标记方法对于读者来说可能更明显，并且如果您在tsconfig中使用strictNullChecking，则避免在代码的其他部分进行额外的空检查

Answer 3

是否需要将默认值设置为空数组？为什么不将其设置为null并仅在从服务器接收到数据时才将其更改。然后，您可以更改警报条件，以检查长度为零的非空值。

Answer 4

此代码将起作用：

public invoices: IInvoice[];

和

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

模板的代码正常。

如何检查数组中是否没有数据并显示消息？

4 个答案: