时间戳

首页 > 解决方案 > [Angular 10][Rxjs] 为什么第二个管道没有触发

angular - [Angular 10][Rxjs] 为什么第二个管道没有触发

问题描述

我有两个订阅者订阅同一个 Observable，但第二个订阅者没有发出值。我缺乏知识的管道是否存在限制？

组件.ts

  private readonly destroyed$ = new Subject<void>();

  public readonly vm$ = this.service.vm$.pipe(
    tap(console.log),
    takeUntil(this.destroyed$)
  );

  public readonly labels$ = this.service.vm$.pipe(
    zip(this.makeLabels),
    tap(console.log),
    takeUntil(this.destroyed$)
  )

  ...
  constructor(private readonly service: SomeService) {
    this.service.load();
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

一些.service.ts

  export class SomeService implements OnDestroy {
    private readonly destroyed$ = new Subject<void>();
    private _vm$ = new BehaviorSubject<ViewModel>(null);
    public readonly vm$ = this._vm$.asObservable().pipe(takeUntil(this.destroyed$));
    ...
    load() { this._vm$.next({...}) }
  }

组件.html

<ng-container *ngIf="vm$ | async as vm">
  <header>
    <pre *ngFor="let label of labels$ | async">
       {{label | json}} 
    </pre>
  </header>
</ng-container>

标签： angulartypescriptrxjs

解决方案

所以解决方案是*ngFor="let label of labels$ | async"从pre高阶ng-container.

<ng-container *ngIf="vm$ | async as vm">
  <header>
    <ng-container *ngFor="let label of labels$ | async">
      <pre>
         {{label | json}} 
      </pre>
    </ng-container>
  </header>
</ng-container>

我不知道为什么，但是这样可以。也许有人可以解释一下。

推荐阅读