Question

我有以下代码：

public obs$: Observable<boolean>

<div *ngIf="(obs$ | async) === true || (obs$ | async) === false">
  {{ (obs$ | async) ? 'yes' : 'no' }}
</div>

它可以正常工作，但是if看起来有点冗长。

问题是我不能简单地做<div *ngIf="(obs$ | async)">。如果我尝试这样做，它将在observable尚未发出值或值为true的情况下起作用，但如果值为false则它将不起作用，因为if的结果为false且div不是显示。

如果返回虚假值（例如空字符串或0），我认为同样的问题也会出现。

是否有更好，更轻松的方法？

Answer 1

您可以进行(obs$ | async) !== null

Answer 2

在这里，您可以共享订阅而不必进行任何自定义管道：

<ng-container *ngIf="{value: obs$ | asyc} as context">
    {{context.value}}
</ng-container>

无论如何，*ngIf的求值结果为true，然后您可以对value对象中的context进行自己的测试。

...如果我认为他们会实施*ngLet，那就更好了！

我喜欢此解决方案的地方是，仅使用async管道即可获得可重复使用的值，并且它仍然非常简洁（即使不是很完美）。

Answer 3

我认为最优雅的方法应该是创建一个自定义BoolPipe，并将其链接到异步管道之后。

@Pipe({name: 'myBool'})
export class MyBoolPipe implements PipeTransform {
  transform(value: boolean, exponent: string): string {
    return !value ? 'yes' : 'no';
  }
}

并在组件或服务的构造函数中初始化obj $（不需要在HTML模板中进行null检查），然后使用异步管道将其链接，如下所示：

<div>{{ obs$ | async | myBool }}</div>

如何使用Angular中的异步管道处理布尔可观察对象

3 个答案: