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

现在我将声明数组设置为：

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>

---

问题是，当服务器返回数据时，会显示这些消息，因为默认情况下，数组是空的。如何仅在没有响应数据时显示此消息。

您可以选择发票，并检查它是否定义为空

public invoices?: IInvoice[];

...

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

或者，也可以使用一个标志，如isFetchingData，指示正在从服务器获取数据，并在*ngIf子句中使用该标志

---

如果在tsconfig中使用strictNullChecking，那么对于读者来说，标志方法可能更清楚地了解正在发生的事情，并且避免在代码的其他部分进行额外的空检查。是否有必要将默认值设置为空数组？为什么不将其设置为null，并且仅在从服务器接收数据时更改它呢。然后，您可以更改警报的条件，以检查长度为零的非空值。

此代码将起作用：

public invoices: IInvoice[];

及

---

模板的代码是确定的

您可以使用模板语法invoice$| async作为发票；else加载以订阅一个可观察对象，但在数据发出之前显示加载消息。加载发票后，如果数组为空，则可以显示警告

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加载是可选的。如果您愿意，可以将此区域留空，直到读取发票为止。

这就是为什么我建议更改条件以检查长度为零的非空值，也就是说，如果您了解此技术，使用可观测值是处理此问题的一个好方法。我会接受这个作为我的答案。我们如何检查返回的IInvoice[]是否为空-即长度==0。如果IInvoice的初始值为[]。它永远不会转到else并呈现加载模板。因此，基本上我们可以显示发票为空或发票正在加载。。我有一个类似的地址模板：*ngIf=addressService.addresses$| async as addresses；否则加载>@Irshad为什么初始值为[]？您应该使用在获取数据时不发出初始值的observable。听起来您可能正在使用具有默认值的Redux存储。那么您应该将默认值更改为null。@Reactgular\uuuuu谢谢。是的，我注意到了，在我在这里发表评论之后。必须将初始状态更改为null，而不是[]

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>