Angular中FilterFn5函数点击有效但ngOnInit调用无效问题求助

安全阿岳

2026-8-17

问题原因

refreshBldList() 中的 this.service.getBuildingList() 是异步HTTP请求，subscribe 内的回调函数只会在服务器返回数据后才执行。而你在 ngOnInit 中先调用 refreshBldList()，紧接着就调用 FilterFn5()，此时 BuildingListWithoutFilter 还未被赋值（仍为初始空状态），过滤操作自然无法生效。

解决方案1：将过滤逻辑放在异步请求回调内

修改 refreshBldList()，在数据赋值完成后直接触发过滤：

refreshBldList(){
  this.service.getBuildingList().subscribe(data=>{
    this.BuildingList = data;
    this.BuildingListWithoutFilter = data;
    // 数据就绪后执行过滤
    this.FilterFn5();
  });
}

对应的 ngOnInit 无需单独调用 FilterFn5()：

ngOnInit(): void {
  this.BuildingNameFilter = "B";
  this.BuildingRoomsFilter = "2";
  this.BuildingFloorFilter = "0";
  this.refreshBldList();
}

解决方案2：用async/await简化异步流程

将Observable转为Promise，通过async/await确保数据就绪后再执行过滤：

import { firstValueFrom } from 'rxjs';

async ngOnInit(): void {
  this.BuildingNameFilter = "B";
  this.BuildingRoomsFilter = "2";
  this.BuildingFloorFilter = "0";
  await this.refreshBldList();
  this.FilterFn5();
}

async refreshBldList(){
  const data = await firstValueFrom(this.service.getBuildingList());
  this.BuildingList = data;
  this.BuildingListWithoutFilter = data;
}

注：RxJS 7+ 已弃用 toPromise()，推荐使用 firstValueFrom/lastValueFrom。

额外优化建议

简化过滤函数，直接使用类属性避免重复声明变量：

FilterFn5(){
  this.BuildingList = this.BuildingListWithoutFilter.filter(el => {
    return el.ApartmentRooms.toString().toLowerCase().includes(
      this.BuildingRoomsFilter.trim().toLowerCase()
    ) && el.BuildingFloor.toString().toLowerCase().includes(
      this.BuildingFloorFilter.trim().toLowerCase()
    ) && el.BuildingName.toString().toLowerCase().includes(
      this.BuildingNameFilter.trim().toLowerCase()
    );
  });
}