Используйте switchMap с Kedno UI Gid в Angular2+

Question

Я использую Kendo UI для Angular Grid с привязкой данных. У меня есть две службы: одна для отправки события поиска из компонента фильтра в компонент сетки и одна (на основе BehaviorSubject) для вызова API.

Способ привязки данных с помощью Grid, который я использую, основан на примерах Kendo. Проблема заключается в том, как использовать switchMap для отмены запросов API, когда пользователь вводит текст во входных данных фильтра. Я знаю оператор switchMap, но не знаю, как использовать его в Kendo UI Grid Service. Я пробовал много способов без успеха, и у меня больше нет идей. Мой код ниже:

Методы службы API, используемые в компоненте Grid

public query(state: any): void {  
    this.getItems(state)
        .subscribe(x =>   
            super.next(x));  
}  

private getItems(state: any): Observable<GridDataResult>{  
    let page = state.skip / state.take + 1;
    let queryStr =         
    `page=` + page + 
    `&size=` + state.take + 
    `&sortColumn=` + state.sortColumn + 
    `&sortDirection=` + state.sortDirection;

    return this.http  
        .get(`${this.BASE_URL}FindItemsComplex?${queryStr}`)  
        .pipe(
            map(response => (<GridDataResult>{
                data: response['data'],
                total: response['length']
            }))
        );  
}    

Методы грид-компонентов

ngOnInit() {
   this.subscription = this.searchService.searchEvent.
   debounceTime(400).
   subscribe((searchModel: ItemsFilter) => 
     {
       this.state = searchModel;   
       this.state.skip = 0;   
       this.state.take = 15;
       this.service.query(this.state);  
     }
   );    
 }

Где и как я должен использовать switchMap? Спасибо за помощь.

РЕДАКТИРОВАТЬ

Метод компонента фильтра, используемый для выдачи события

HTML

<input kendoTextBox [(ngModel)]="itemsFilter.textSearch" (ngModelChange)="onSearch()" [ngClass]="'form-control'" />

TS

onSearch() {
   this.searchService.Search(this.itemsFilter);
}

Служба поиска

export class ItemsSearchService {
   constructor() {
       this.searchEvent = new EventEmitter();
   }

   Search(query :ItemsFilter) {
       this.searchEvent.emit(query);
   }

   searchEvent: EventEmitter<ItemsFilter>;
}

Answer 1

Функция "debounceTime" также может отменять запросы API, когда пользователь вводит текст в фильтр ввода, например "switchMap". Вы уже используете "debounceTime", поэтому вам не нужно снова использовать "switchMap".