BehaviorSubject、async管道与*ngIf组合异常：ngOnChanges接收无效值

问题根源 #

你遇到的核心问题是模板中多次使用(channels$ | async)导致的多订阅不同步：
每个async管道都会独立订阅一次channels$，而combineLatest在源Observable未完成初始发射时（比如this.service.getYoutubeChannels()是HTTP请求，初始无返回值），会先发射包含null的组合值。当*ngIf的订阅第一次拿到null时不会渲染子组件，但当请求返回数据后，*ngIf通过校验渲染子组件的瞬间，子组件绑定的async订阅可能刚好触发一次中间发射，导致先收到null，再收到有效数据。

解决方案 #

方案1：统一订阅避免多实例 #

用ng-container一次性订阅channels$并将结果存入模板变量，所有依赖逻辑复用该变量，确保仅订阅一次，数据完全同步：

<lookup-area [debounceTime]="100"
             (searchValue)="searchChanged($event)"></lookup-area>

<ng-container *ngIf="(channels$ | async) as channels">
  <app-virtual-list *ngIf="channels.length > 0"
                    [items]="channels"
                    [itemHeightPx]="32"
                    [maxContainerHeightPx]="190 - (channels.length ? 29 : 0)"
                    [trackByFn]="trackByFn">
      <ng-template let-item>Some template</ng-template>
  </app-virtual-list>
</ng-container>

方案2：在Observable层过滤无效数据 #

在父组件的channels$管道中提前处理null/空数组，确保仅发射有效数据，简化模板逻辑：

this.channels$ = combineLatest([this.service.getYoutubeChannels(), this.search$]).pipe(
  map(([channels, search]) => {
    if (!channels) return []; // 兜底处理channels为null的情况
    return search ? channels.filter(channel => (channel.name || channel.id).startsWith(search)) : channels;
  }),
  map(channels => channels.sort((a, b) => (a.name || a.id).localeCompare((b.name || b.id), undefined, { sensitivity: 'base' }))),
  filter(channels => channels.length > 0) // 仅发射长度大于0的数组
);

此时模板中*ngIf可简化为：

<app-virtual-list *ngIf="channels$ | async as channels"
                  [items]="channels"
                  [itemHeightPx]="32"
                  [maxContainerHeightPx]="190 - (channels.length ? 29 : 0)"
                  [trackByFn]="trackByFn">
    <ng-template let-item>Some template</ng-template>
</app-virtual-list>

方案3：子组件内增加防御判断 #

如果不想修改父组件逻辑，可在子组件的ngOnChanges中仅处理有效数据：

public ngOnChanges(changes: SimpleChanges): void {
    const { items, itemHeightPx, maxContainerHeightPx } = changes;

    // 仅当items有效且maxContainerHeightPx存在时执行逻辑
    if (this.maxContainerHeightPx && this.items?.length > 0 && (items || itemHeightPx || maxContainerHeightPx)) {
       this.setContainerScrollHeight();
    }
}

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