Angular模板中如何检查observable是否为空

Question

我在我的Angular组件中定义了一个Observable，如下所示。

profiles$!: Observable<Profile[] | undefined>;`

我尝试在模板中检查这个数组的长度，代码如下。

<div *ngIf="(profiles$ | async).length > 0"></div>

通过这个结构，我会收到来自TypeScript编译器的错误信息“Object is possibly 'null' or 'undefined'.”，这完全可以理解。因此，请在我的if条件中添加一个null检查。

<div *ngIf="(profiles$ | async) && (profiles$ | async).length > 0"></div>

我仍然得到同样的错误，即对象可能为 null。我猜编译器没有识别出 null 检查。我的问题是如何进行空值检查以避免 TypeScript 编译器的错误。

- Markus

---

你可以尝试使用(profiles$ | async)?.length > 0。我猜在第二个例子中，编译器无法知道值必须存在，因为有(profiles$ | async)。 - martin

是的，那个有效！谢谢 :) - Markus

Answer 1

如果Observable返回null，就会出现问题。

<div *ngIf="(profiles$ | async).length > 0"></div>

一个快速解决这个问题的方法是使用安全导航运算符?。

<div *ngIf="(profiles$ | async)?.length > 0"></div>

如果您希望对可观察对象的返回值进行额外检查，则可以使用ng-container和ngIf。

<ng-container *ngIf="(profiles$ | async) as result">
  <div *ngIf="result.length > 0"></div>
</ng-container>

- Muhammed Albarmavi