Angular中ngx-mat-select-search动态数据无法加载初始列表问题

原有实现存在两个逻辑断点，直接造成首次下拉面板打开时无初始数据渲染：

• 你声明的filteredOptions是带1帧缓存的ReplaySubject，但从组件初始化到首次打开下拉的全流程中，从来没有往这个Subject里推送过第一版全量数据。
  代码中虽然写了data属性的setter，只要给data赋值就会自动把全量列表切片后推送给filteredOptions，但实际接口返回车辆数据后，直接把返回值存在了独立的vehicles变量里，完全没有触发data的setter逻辑——filteredOptions自创建后从未收到任何推送，模板里的async管道订阅后自然拿不到数据渲染。
• 你提到搜索时过滤逻辑是正常的，本质是因为输入关键词会触发modelFilterCtrl的valueChanges回调，调用filterEntities方法时会主动给filteredOptions推送过滤后的数据，这部分链路是通的，但因为缺少初始状态的推送，首次打开时面板没有任何可渲染的数据源，自然是空列表。

• 调整接口回调逻辑，拿到服务端返回的车辆数组后，直接把值赋值给带setter的data属性，替换掉原来单独存vehicles的写法。赋值操作会自动触发setter，把全量列表切片后推送给filteredOptions，完成第一次初始值推送。
• 接口数据赋值完成后，主动调用一次filterEntities方法，确保无搜索关键词时的初始过滤逻辑正常执行，和后续输入关键词时的过滤规则完全对齐，避免出现初始列表和无搜索词下的过滤结果不一致的问题。
• 给modelFilterCtrl做初始空值兜底，避免FormControl初始值为null导致的首次valueChanges不触发的兼容性问题。

ngOnInit(): void {
  this.campaignService.getVehicles().subscribe((data: any[]) => {
    // 触发data属性setter，自动推送初始全量列表
    this.data = data;
    // 兜底触发一次初始值变更，跑通无关键词状态下的过滤逻辑
    this.modelFilterCtrl.setValue('', { emitEvent: true });
    this.filterEntities();
  })

  this.modelFilterCtrl.valueChanges
    .pipe(takeUntil(this._onDestroy))
    .subscribe(() => {
      this.filterEntities();
    });
}

• ReplaySubject(1)的特性是只会给后续新订阅者推送最近一次已经发出的值，如果从来没调用过next()推送数据，哪怕订阅时机再早，也拿不到任何内容。
• 原有代码里的setInitialValue方法，只是订阅了filteredOptions的第一个值来设置mat-select的compareWith比对规则，本身不会生成、推送初始数据源，不要把这个方法当成初始化列表的逻辑入口。
• 后续如果有动态刷新车辆列表的需求，只需要重新给this.data赋值即可，setter会自动完成新列表的初始推送，不需要重复写数据推送逻辑。

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