可选的异步管道或默认答案

【问题标题】：Optional Async Pipe Or Default可选的异步管道或默认
【发布时间】：2019-12-05 10:57:20
【问题描述】：

如果可观察值未定义，我没有找到更好的读取默认值的方法。
而不是为模板中的每个可观察属性编写这部分代码

            <div *ngIf="!property.visible$
              ? property.visible || true
              : (property.visible$ | async">Test</div>

这里能用最短的方法吗？

目前正在寻找编写 customPipe 来完成相同工作的可能性，但似乎很难扩展异步管道以拥有此模板

property.visible$ | async: property.visible || true

或者您还有其他想法吗？

注意：

也可以在 ts 文件中使用此逻辑编写一个函数，但不要认为每次更新 html 并且我们需要读取一个 observable 时获取 (1) 订阅值对性能来说不是一个好主意价值

【问题讨论】：

https://ultimatecourses.com/blog/angular-ngif-async-pipe 可能是你的情况..

标签： angular rxjs pipe

【解决方案1】：

您可以创建自己的 observable，然后使用 async pipe 订阅它：

this.visible$ = of({}).pipe(switchMap(() => {
 if (this.property.visible$) return this.property.visible$;

 return of(this.property.visible);
}));

...

<div *ngIf="visible$ | async"></div>

请看看这个stackblitz

【讨论】：

【解决方案2】：

可以使用这个扩展异步管道

import { Pipe, PipeTransform } from '@angular/core';
import { Observable, of } from 'rxjs';

@Pipe({ name: 'default$' })
export class Default$Pipe implements PipeTransform {
  transform(
    value$: Observable<any> | undefined,
    defaultValue: any
  ): Observable<any> {
    return value$ ? value$ : of(defaultValue);
  }
} 

 property.visible$| default$ : property.visible || false | async

【讨论】：