0

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

我使用的与 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>;
}
4

1 回答 1

0

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

于 2018-09-12T07:52:25.957 回答