适用于（单击）的 Function 不适用于 ngOnInit()

Question

我制作了一个过滤器 function，其中过滤器应用于列表中的元素，当我在页面上单击时使用它时它会起作用，就像这样

<button (click)="FilterFn5()"> do </button>

但是当我将 function 放在 ngOnInit 上时它不起作用。 我的 ngOnInit 看起来像这样：

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

}

function 是：

    FilterFn5(){

  var BuildingNameFilter = this.BuildingNameFilter;
  var BuildingFloorFilter = this.BuildingFloorFilter;
  var BuildingRoomsFilter = this.BuildingRoomsFilter;

  this.BuildingList = this.BuildingListWithoutFilter.filter( (el: 
    { BuildingId:
    { toString: () => string; }; BuildingFloor: { toString: () => string; }; 
    BuildingName: { toString: () => string; }
    ApartmentRooms: { toString: () => string; };  }) =>{
     

    return el.ApartmentRooms.toString().toLowerCase().includes(
      BuildingRoomsFilter.toString().trim().toLowerCase()
      
    )
    && el.BuildingFloor.toString().toLowerCase().includes(
      BuildingFloorFilter.toString().trim().toLowerCase()
    )&&
      el.BuildingName.toString().toLowerCase().includes(
        BuildingNameFilter.toString().trim().toLowerCase()
      ) 
  });

}

被过滤的列表是BuildingList和 function this.refreshBldList(); 是列表获取其元素的地方

  refreshBldList(){
this.service.getBuildingList().subscribe(data=>{
  this.BuildingList=data;
  this.BuildingListWithoutFilter=data;
});

}

Answer 1

这是因为您的服务获取操作中的异步语句。

基本上，您尝试在调用服务以检索数据后立即调用 FilterFn5()。 但是当您执行 FilterFn5 function 时，您的数据可能还没有准备好。

我建议通过以下方式调整您的刷新 function：

ngOnInit(): void {
this.BuildingNameFilter="B"
this.BuildingRoomsFilter="2"
this.BuildingFloorFilter="0"
this.refreshBldList();
// this.FilterFn5(); <-- remove this line
}

// ...

refreshBldList(){
this.service.getBuildingList().subscribe(data=>{
  this.BuildingList=data;
  this.BuildingListWithoutFilter=data;
  this.FilterFn5(); // <-- add this line
});
}

你还可以做的是在你的 HTML 模板中禁用你的按钮，直到你从你的服务中获得数据：

<button [disabled]="!BuildingListWithoutFilter" (click)="FilterFn5()"> do </button>