带有分页的过滤器在angular2中无法使用mdInput

时间:2017-09-28 11:14:00

标签: angular

问题:

  When we are in the 1st page with index 1 the mdInput filter works as expected but when we are in the 2nd page i,e index 2 filter starts working form 2nd page only not working for 1st page and 3rd page.

预期:

      Even we are in 2nd page filter should work by taking all the pages.Could some one help me....

演示:

TS Code如下:

下面显示的是.ts文件,我在其中动态加载表中的数据。我还包括了分页指令mdInput。

export class DummyDataSource extends DataSource<any> 
{
    _filterChange = new BehaviorSubject('');
    get filter(): string { return this._filterChange.value; }

    set filter(filter: string) { this._filterChange.next(filter); }
    filteredData: ICatAnalysisProjectViewModel[] = [];
    filterstring: string ;
    constructor(private _catAnalysisProjectsDatabase: CatAnalysisProjectsDatabase , private _paginator: MdPaginator) {
        super();
      }
    connect(): Observable<ICatAnalysisProjectViewModel[]> {
        const displayDataChanges = [this._catAnalysisProjectsDatabase.dataChange,
                                     this._paginator.page, this._filterChange];

        return Observable.merge(...displayDataChanges).map(() => {
            this.filteredData = this._catAnalysisProjectsDatabase.data.slice().filter((item: ICatAnalysisProjectViewModel) => {
              let searchStr = (item.ProjectCode).toLowerCase();
              this.filterstring = this.filter.toLowerCase();
              return searchStr.indexOf( this.filterstring) !== -1;
            });
            const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
                        return this.filteredData.splice(startIndex, this._paginator.pageSize) ;

          });
}
    disconnect() {}
}

Html代码如下:

                            <md-paginator #paginator
                                [length]="totalLength"
                                [pageIndex]="0"
                                [pageSize]="5"
                                [pageSizeOptions]="[5, 10, 25, 100]"
                                (page)="pageEvent = $event; onPaginateChange($event)">
                            </md-paginator>
                        </ng-container>

谢谢:

If any one finds solution please provide solution....
Thanks in Advance......

0 个答案:

没有答案