一旦 observable 完成，如何使用异步管道删除元素

Question

假设我有一个 div 元素，其中有一个发出值的可观察对象：

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

执行此操作后，我想从 DOM 中删除该元素：

obseravle$.complete();

是否有一种有角度的方法可以实现这一目标，而无需从 .ts 文件订阅组件并使用标志？

非常感谢。

Answer 1

你必须让可观察的东西像

undefined

或

null

作为最终值，为此我使用

finalize

。

这里我使用

EMPTY

这只是一个完整的可观察值。

import { AsyncPipe, CommonModule } from '@angular/common';
import {
  Component,
  Directive,
  ElementRef,
  Input,
  Renderer2,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Observable, interval, last, EMPTY } from 'rxjs';
import { finalize, take } from 'rxjs/operators';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, CommonModule],
  template: `
    <div *ngIf="(observable$ | async) as value" [hidden]="!value"> {{value}} </div>
  `,
})
export class App {
  name = 'Angular';
  swap = 0;
  observable$ = interval(1000).pipe(
    take(10),
    finalize(() => {
      this.observable$ = EMPTY;
    })
  );
}

bootstrapApplication(App);

Stackblitz 演示

Answer 2

当 Observable 完成时，您可以再发出一个值，表明您想要隐藏周围的容器。在此示例中，我使用

endWith()

，它将在源完成后发出：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, NgIf, NgTemplateOutlet],
  template: `
    <ng-container
      [ngTemplateOutlet]="content"
      [ngTemplateOutletContext]="{$implicit: observable$ | async}"
    >
    </ng-container>

    <ng-template #content let-value>
      <ng-container *ngIf="value !== null">
        <h1>Value {{ value }}!</h1>
      </ng-container>
    </ng-template>
  `,
})
export class App {
  observable$ = range(1, 4).pipe(
    concatMap((val) => of(val).pipe(delay(1000))),
    endWith(null)
  );
}

我仅使用

[ngTemplateOutlet]

来存储来自

async

管道的值。我可以只使用

*ngIf="a | async as value"

但它不会显示等于

false

的值的容器，例如

""

或

0

，这在您的用例中可能没问题，因此您可以稍微简化代码.

现场演示：https://stackblitz.com/edit/stackblitz-starters-w2p2ly?file=src%2Fmain.ts