如何在Observable完成后用async pipe移除DOM元素？

可以借助RxJS的endWith操作符，在原Observable完成时主动发送一个假值（falsy value），让*ngIf的条件不成立，从而自动移除DOM元素，完全不需要在组件类里手动订阅或维护标志变量。

具体实现方式：

• 在组件的Observable定义中，通过pipe添加endWith(null)（或undefined、false等假值）
• 模板保持原有写法即可

代码示例 #

组件类中：

import { endWith } from 'rxjs/operators';
// 假设这是你的原Observable
originalObservable$ = of('示例内容').pipe(delay(1000));
// 改造后，Observable完成时会发出null
observable$ = this.originalObservable$.pipe(endWith(null));

模板中：

<div *ngIf="(observable$ | async) as value"> {{ value }} </div>

当originalObservable$执行complete()后，endWith会立即发出null，async管道接收到这个值后，value变为null，*ngIf条件不满足，元素就会从DOM中移除。

如果不想修改原Observable，也可以直接在模板里嵌套管道（更推荐在组件类中处理以保持模板简洁）：

<div *ngIf="(observable$ | endWith: null | async) as value"> {{ value }} </div>

内容的提问来源于stack exchange，提问作者Dannom