在Angular2+中使用带有Kedno UI Gid的switchMap；

我使用剑道UI进行数据绑定的角度网格。我有两个服务：一个用于将搜索事件从过滤器组件发送到网格组件，另一个（基于BehaviorSubject）用于调用API

我使用的网格数据绑定方法基于剑道示例。问题是当用户在过滤器输入中键入文本时，如何使用switchMap取消API请求。我知道switchMap操作符，但我不知道如何在基于KendoUI网格的服务中使用它。我尝试了很多方法都没有成功，我也没有更多的想法。我的代码如下：

网格组件中使用的API服务方法

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

我应该在哪里以及如何使用switchMap？ 谢谢你的帮助

编辑

用于发出事件的过滤组件方法

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

HTML

搜索服务

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

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

   searchEvent: EventEmitter<ItemsFilter>;
}

导出类ItemsSearchService{
构造函数（）{
this.searchEvent=新的EventEmitter（）；
}
搜索（查询：ItemsFilter）{
this.searchEvent.emit（查询）；
}
searchEvent:EventEmitter；
}

当用户在“switchMap”等过滤器输入中键入文本时，函数“debounceTime”也可以取消API请求。您已经使用了“debounceTime”，因此不需要再次使用“switchMap”。

您是否可以包括用户在filte rcomponent中输入文本时调用的函数？我的经验不同，我想取消所有以前的请求，让最后一个被调用。但现在使用“debounceTime”时，我会遇到这样的情况：我从请求中得到API的响应，该请求在刚才被调用，最后一个请求很可能完成得更快。所以，表中输入筛选器和数据的当前状态不匹配DeBounceTime将终止所有以前的请求，并让最后一个请求按您的喜好被调用。请参见办公网站上的以下声明：debounceTime延迟可观测源发出的值，但如果新值到达可观测源，则会删除以前待定的延迟发射。检查示例，您可能会找到答案。

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

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

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

   searchEvent: EventEmitter<ItemsFilter>;
}