SwitchMap Angular

Question

I'm using the angular material's table component, mat-table, along with pagination.

I have the filter method that serves when the user types a text in the field to do a search, it is sent to the backend, the text, the size and the page.

However, I tried to fit the switchmap, to cancel the previous requests, because with each typed letter, the method is triggered and sends a call to the server. So I want to cancel all previous calls and leave only the last one.

I'm already using the debounceTime to define a time after the user finishes typing to start the calls.

Below is the filter method that is triggered when the user starts typing 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);
      });
  }

This is another method that sends a request to the database and repopulates the table.

 loadData(search: string = '', limite: number, pagina: number) {
    if (search === 'sim') {
      search= 'true';
    } else if (search === 'nao' || search === 'não') {
      search= 'false';
    }
    this.service.listartecnicosPaginacao(search, limite, pagina).subscribe((res: any) => {
      this.dataSource.data = res['lista'];
      setTimeout(() => {
        this.paginator.pageIndex = this.currentPage;
        this.paginator.length = res.totalElemento;
      });
    });
  }

I tried to do it as below.

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

And I get it as a message.

(method) ListTableComponent.loadData(busca: string | undefined, limite: number, pagina: 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'?

And even putting the switchMap((data:any) => xxxx()) in this way, the message above continues.

`switchMap` is expecting `loadData` to return an observable. You could do something like return `this.service.listartecnicosPaginacao(search, limite, pagina)` directly and then handle the data manipulation downstream of the `switchMap` in the same pipe — possum, Apr 11 '23 at 12:23

score 1 · Answer 1 · answered Apr 11 '23 at 12:20

1

loadData does not return anything hence the 'void'

return this.service.listartecnicosPaginacao...

Applying the filter should only trigger the subject:

applyFilter(search: string) {
    this._search$.next(search.toLocaleLowerCase());
}

and subscribe to the _search$ in ngOnInit for example

answered Apr 11 '23 at 12:20

Alexander

3,019
1
20
24

I can't put the loadData method as observable, because it is used in other methods, such as changing pagination and etc, and when I do that the filter works, but when trying to paginate the table it calls the loadData method, but it doesn't bring data. – Hugo Leonardo Jul 05 '23 at 18:24

SwitchMap Angular

1 Answers1