Búsqueda de sitios web

angular - La función que funciona con (click) no funciona en ngOnInit()


Hice una función de filtro, donde el filtro se aplica a elementos de una lista, que funciona cuando la uso en la página con un clic, así

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

Pero no funciona cuando pongo la función en ngOnInit. Mi ngOnInit se ve así:

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

}

y la función es:

    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()
      ) 
  });

}

La lista que se filtra es BuildingList y la función this.refreshBldList(); es donde la lista OBTIENE sus elementos

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

}

Respuesta #1

Es por tu declaración async de la operación get de tu servicio.

Básicamente, estás tratando de llamar a FilterFn5() inmediatamente después de llamar a tu servicio para recuperar los datos. Pero tus datos podrían no estar listos cuando ejecutes la función FilterFn5.

Sugiero adaptar tu función de actualización de la siguiente manera:

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
});
}

Lo que también puedes hacer es desactivar tu botón en tu plantilla HTML hasta que hayas obtenido los datos de tu servicio:

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