Question

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

我使用的与Grid进行数据绑定的方式基于Kendo示例。问题是当用户在过滤器输入中键入文本时，如何使用switchMap取消API请求。我知道switchMap运算符，但我不知道如何在基于Kendo UI 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'。

在Angular2 +中将switchMap与Kedno UI Gid一起使用

1 个答案: