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>
