2017-10-18 33 views
0

我想應用Angular Material Text Filtering的示例使用來自http get調用的數據。角度材料表文本過濾 - rxjs - 合併http獲取結果與過濾器主題

export class MyDtoDataSource extends DataSource<IMyDto> { 
     private _filterChange = new BehaviorSubject(''); 
     public get filter(): string { return this._filterChange.value; } 
     public set filter(filter: string) { this._filterChange.next(filter); } 

     constructor(private _apiService: ApiService) { 
      super() 
     } 

     connect(): Observable<IMyDto[]> { 

      const displayDataChanges = [ 
       this._apiService.getMyDtos(), 
       this._filterChange, 
      ]; 

      return Observable 
      .merge(...displayDataChanges) 
      .map((dtos: IMyDto[]) => dtos.filter(dto => dto.categories.map(i => i.name).includes(this.filter))); 
     } 

    disconnect() { 
    } 
} 

不過,我想有我地圖的問題,因爲我得到的運行時錯誤dtos.filter is not a function

+0

'_filterChange'會發出'string',而不是一個'IMyDto []'所以包括它在'merge'會看到'string'值合併到可觀察到的數據流,影響您所看到的錯誤。您很可能想使用['withLatestFrom'](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom)而不是'merge'。 – cartant

回答

0

韓國社交協會以@cartant爲點我到正確的方向。

connect(): Observable<IMyDto[]> { 
    return Observable 
     .combineLatest(this._apiService.getMyDtos(), this._filterChange) 
     .map(([dtos, filter]) => dtos.filter(dto => dto.categories.map(i => i.name).includes(filter))); 
}