Angular中mat-select集成NgxMatSelectSearch时API加载数据不显示问题

问题根因 #

HTTP请求属于异步操作，ngOnInit执行时会先同步执行this.filteredData.next(this.dataModel.slice())，此时dataModel还是初始化的空数组。接口返回数据赋值给dataModel后，你没有主动通知filteredData更新数据，所以页面初始渲染时拿到的一直是空数组，只有点击select触发变更检测/搜索控件的valueChanges事件后，才会重新走筛选逻辑拿到最新数据。

修复方案 #

只需修改load方法，接口拿到数据后主动更新筛选数据源即可，修改后代码如下：

load() {
  return this.service.LoadData().subscribe(res => {
    this.dataModel = res;
    // 接口返回数据后更新筛选后的数据源
    this.filteredData.next(this.dataModel.slice());
  });
}

如果需要兼容搜索框已有默认输入值的场景，可以直接调用已经封装好的filterData方法：

load() {
  return this.service.LoadData().subscribe(res => {
    this.dataModel = res;
    // 调用现有筛选方法，适配已输入搜索值的场景
    this.filterData();
  });
}

优化建议 #

可以把DataloadService中LoadData方法的返回值从Observable<any>改为Observable<DataModel[]>，提前规避类型不匹配的潜在问题。

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