在Angular 2中使用switchMap和Kendo UI Grid

Question

我使用带有数据绑定的Angular Grid的Kendo UI。我有两个服务：一个用于从过滤器组件向网格组件发出搜索事件，另一个用于调用API（基于BehaviorSubject）。

我使用Grid的数据绑定方式基于Kendo示例。问题是当用户在过滤器输入中键入文本时如何使用switchMap取消API请求。我知道switchMap运算符，但我不知道如何在基于Kendo UI Grid的服务中使用它。我尝试了许多方法但没有成功，我没有更多的想法。我的代码如下：

Grid组件中使用的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']
            }))
        );  
}    

网格组件方法

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

当用户在过滤器输入中键入文本（如'switchMap'）时，函数'debounceTime'也可以取消API请求。你已经使用'debounceTime'，所以你不需要再次使用'switchMap'。