動態設置md-paginator值

Question

我正在嘗試使用pagination的angular-material2。我面臨的問題是通過服務動態地設置md-paginator的值。

我設法使用靜態值創建分頁，但我不知道如何動態設置它們。

Plunker

TS

import {Component,ChangeDetectorRef, Input,ViewChild } from '@angular/core'; 
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http'; 
import {MdPaginator,PageEvent} from '@angular/material'; 
import {DataSource} from '@angular/cdk'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'table-http-example', 
    styleUrls: ['table-http-example.css'], 
    templateUrl: 'table-http-example.html', 
}) 
export class TableHttpExample { 
    displayedColumns = ['dbquery', 'title']; 
    exampleDatabase: ExampleHttpDatabase | null; 
    dataSource: ExampleDataSource | null; 
    pageEvent: PageEvent; 

    @ViewChild(MdPaginator) paginator: MdPaginator; 

    constructor(private http: Http) { 

    } 
    ngOnInit(){ 
    this.loadData(); 
    } 
    loadData(){ 
    this.exampleDatabase = new ExampleHttpDatabase(this.http); 
    this.dataSource = new ExampleDataSource(this.exampleDatabase,this.paginator); 
    } 
    onPaginateChange(event){ 

    const startIndex = event.pageIndex * event.pageSize; 

     this.dataSource = new ExampleDataSource(this.exampleDatabase,this.paginator); 

    } 
} 

/** An example database that the data source uses to retrieve data for the table. */ 
export class ExampleHttpDatabase { 
    private issuesUrl = 'https://emgrweb.ecwcloud.com/eManagerWeb/rest/InterfaceQAClientController/getInterfaceClientScripts'; // URL to web API 

    getRepoIssues(startIndex,pageSize): Observable<any> { 
    var headers = new Headers(); 
    headers.append('Content-Type', 'text/plain'); 
    var requestoptions = new RequestOptions({ 
      method: RequestMethod.Post, 
      url: this.issuesUrl, 
      headers: headers 
      body : "start=" +startIndex +"&limit="+ pageSize 
      }) 

     return this.http.request(new Request(requestoptions)).map(this.extractData); 
    } 

    extractData(result: Response): any{ 
    return result.json().data.map(data => { 
     return data 

    }); 
    } 
    onPaginateChange(event){ 
    //alert(JSON.stringify(event)); 
    const startIndex = event.pageIndex * event.pageSize; 
//  this.drugmap.getDrugDataForClient(startIndex, event.pageSize); 
    this.dataSource = new BindDataTableSource(this.drugmap,event); 

    } 
    constructor(private http: Http) {} 
} 

export class ExampleDataSource extends DataSource<any> { 
    constructor(private _exampleDatabase: ExampleHttpDatabase,private _paginator : MdPaginator) { 
    super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<any[]> { 
    console.log(this._paginator); 
    const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
    return this._exampleDatabase.getRepoIssues(startIndex, this._paginator.pageSize); 
    } 

    disconnect() {} 
} 

HTML

<div class="example-container mat-elevation-z8"> 
    <md-table #table [dataSource]="dataSource"> 

    <ng-container cdkColumnDef="dbquery"> 
     <md-header-cell *cdkHeaderCellDef> dbquery </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.title}} </md-cell> 
    </ng-container> 


    <ng-container cdkColumnDef="title"> 
     <md-header-cell *cdkHeaderCellDef> Title </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.title}} </md-cell> 
    </ng-container> 



    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 

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

試圖傳遞paginator對象ExampleHttpDatabase但是當我console出來，它說不確定。

Answer 1

要動態更改這些值，請使用變量作爲<md-paginator>的輸入。當這些變量發生變化時，分頁器會將它們提取並呈現給視圖。

<md-paginator #paginator 
      [length]="myExampleLength" 
      [pageIndex]="myExamplePageIndex" 
      [pageSize]="myExamplePageSize" 
      [pageSizeOptions]="myExamplePageSizeOptions" 
      (page)="pageEvent = $event; onPaginateChange($event)"> 
</md-paginator>