动态设置 md-paginator 值

Posted 2023-03-10

【中文标题】动态设置 md-paginator 值

【英文标题】：set md-paginator values dynamically

【发布时间】：2017-12-31 14:52:49

【问题描述】：

我正在尝试使用 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 传递出去时，它显示未定义。

【参考方案1】：

要动态更改值，请将变量用作<md-paginator> 的输入。当这些变量发生变化时，分页器会将它们拾取并呈现给视图。

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

【讨论】：

我尝试了一些东西并更新了 plunker，但不幸的是设置的值是undefined。可以帮忙看看吗？

几个问题，有时你称之为pagerLength，你称之为pageLength。最大的问题是您没有在正确的this 上下文中调用extractData。查看这个 plunker 的固定示例：plnkr.co/edit/BBdEKJ4WnJVBetZR4AkY?p=preview

我看了看 Andrew 添加的 plunker。问题： plnkr 方法 onPaginateChange(event) 有以下行： this.dataSource = new BindDataTableSource(this.drugmap,event); BindDataTableSource 似乎没有在任何地方定义。它是什么？如果可能，请您修复 plnkr 吗？谢谢！