I am currently utilizing the mat-table component from angular material, in conjunction with pagination features.
Whenever a user inputs text into the search field, a filter method is activated to send the text, page size, and current page to the backend for search purposes.
To optimize performance, I attempted to implement the switchmap function to cancel previous requests. This way, only the latest request will be processed, preventing multiple calls to the server for each keystroke.
In addition, debounceTime is also being utilized to set a delay after the user stops typing before initiating the call.
Displayed below is the filter method triggered by user input in the search field:
_search$: Subject<string> = new Subject<string>();
search = '';
applyFilter(search: string) {
this._search$.next(search.toLocaleLowerCase());
this._search$.pipe(
debounceTime(GlobalVariables.DEBOUNCETIME),
)
.subscribe((data: string) => {
this.currentPage = 0;
this.loadData(data, this.pageSize, this.currentPage);
});
}
Another method responsible for querying the database and updating the table:
loadData(search: string = '', limit: number, page: number) {
if (search === 'sim') {
search= 'true';
} else if (search === 'nao' || search === 'não') {
search= 'false';
}
this.service.listartecnicosPaginacao(search, limit, page).subscribe((res: any) => {
this.dataSource.data = res['lista'];
setTimeout(() => {
this.paginator.pageIndex = this.currentPage;
this.paginator.length = res.totalElemento;
});
});
}
My attempt to integrate switchMap into the code resulted in the following message:
applyFilter(search: string) {
this._search$.next(search.toLocaleLowerCase());
this.currentPage = 0;
this._search$.pipe(
debounceTime(VariaveisGlobais.DEBOUNCETIME),
switchMap(data => this.loadData(data, this.pageSize, this.currentPage))
)
.subscribe();
}
Despite adjusting the syntax as suggested, the error message persisted:
(method) ListTableComponent.loadData(search: string | undefined, limit: number, page: number): voidType 'void' is not assignable to type 'ObservableInput<any>'.ts(2322) switchMap.d.ts(2, 79): The expected type comes from the return type of this signature.list-table.component.ts(94, 17): Did you mean to mark this function as 'async'?
The issue remained even after modifying the switchMap parameter.