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

Question

我对同一个Observable有两个订阅者，但是第二个没有发出值。管道有我不知道的限制吗?

component.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();
}

some.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({...}) }
}

component.html

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

Answer 1

解决方案是将*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>

我不知道为什么，但它是这样工作的。也许有人能解释一下。