动态设置 md-paginator 值 [英] set md-paginator values dynamically

问题描述

我正在尝试使用 angular-material2 的 pagination .我面临的问题是通过服务动态设置 md-paginator 的值.

我已经设法使用静态值创建了分页，但我不知道如何动态设置它们.

Plunker

TS

import {Component,ChangeDetectorRef, Input,ViewChild } from '@angular/core';从@angular/http"导入 {Http, Response, RequestOptions, Headers, Request, RequestMethod};从@angular/material"导入 {MdPaginator,PageEvent}；从 '@angular/cdk' 导入 {DataSource}；从 'rxjs/BehaviorSubject' 导入 {BehaviorSubject}；从 'rxjs/Observable' 导入 {Observable}；导入 'rxjs/add/operator/startWith';导入 'rxjs/add/observable/merge';导入 'rxjs/add/operator/map';@成分({选择器:'table-http-example'，styleUrls: ['table-http-example.css'],templateUrl: 'table-http-example.html',})导出类 TableHttpExample {displayColumns = ['dbquery', 'title'];示例数据库:ExampleHttpDatabase |空值;数据源:ExampleDataSource |空值;页面事件:页面事件；@ViewChild(MdPaginator) 分页器:MdPaginator；构造函数(私有http:Http){}ngOnInit(){this.loadData();}加载数据(){this.exampleDatabase = new ExampleHttpDatabase(this.http);this.dataSource = new ExampleDataSource(this.exampleDatabase,this.paginator);}onPaginateChange(事件){const startIndex = event.pageIndex * event.pageSize;this.dataSource = new ExampleDataSource(this.exampleDatabase,this.paginator);}}/** 数据源用于检索表数据的示例数据库.*/导出类 ExampleHttpDatabase {私人问题Url = 'https://emgrweb.ecwcloud.com/eManagerWeb/rest/InterfaceQAClientController/getInterfaceClientScripts';//指向 Web API 的 URLgetRepoIssues(startIndex,pageSize): Observable{var headers = new headers();headers.append('Content-Type', 'text/plain');var requestoptions = new RequestOptions({方法:RequestMethod.Post，网址:this.issuesUrl，标题:标题正文:开始="+开始索引+&limit="+ pageSize})返回 this.http.request(new Request(requestoptions)).map(this.extractData);}提取数据(结果:响应):任何{返回 result.json().data.map(data => {返回数据});}onPaginateChange(事件){//警报(JSON.stringify(事件))；const startIndex = event.pageIndex * event.pageSize;//this.drugmap.getDrugDataForClient(startIndex, event.pageSize);this.dataSource = new BindDataTableSource(this.drugmap,event);}构造函数(私有 http: Http){}}导出类 ExampleDataSource 扩展了 DataSource{构造函数(私有_exampleDatabase:ExampleHttpDatabase，私有_paginator:MdPaginator){极好的();}/** 表调用的连接函数以检索包含要呈现的数据的流.*/connect(): Observable{console.log( this._paginator);const startIndex = this._paginator.pageIndex * this._paginator.pageSize;返回 this._exampleDatabase.getRepoIssues(startIndex, this._paginator.pageSize);}断开连接(){}}

HTML

<md-table #table [dataSource]="dataSource"><ng-container cdkColumnDef="dbquery"><md-header-cell *cdkHeaderCellDef>dbquery </md-header-cell><md-cell *cdkCellDef="let row">{{row.title}} </ng-容器><ng-container cdkColumnDef="title"><md-header-cell *cdkHeaderCellDef>标题</md-header-cell><md-cell *cdkCellDef="let row">{{row.title}} </ng-容器><md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row><md-row *cdkRowDef="让行；列:displayColumns;"></md-row></md-table><md-paginator #paginator[长度]="100"[页面索引]="0"[页面大小]="10"[pageSizeOptions]="[5, 10, 25, 100]"(page)="pageEvent = $event; onPaginateChange($event)"></md-paginator>

尝试将 paginator 对象传递给 ExampleHttpDatabase，但是当我 console 输出它时，它显示未定义.

解决方案

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

</md-paginator>

I am trying to use pagination of angular-material2 . The problem I am facing is to set the values of md-paginator dynamically through a service.

I have managed to create the pagination using static values but I dont know how to set them dynamically.

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>

Tried passing the paginator object to ExampleHttpDatabase but when I console it out, it says undefined.

解决方案

To change the values dynamically, use variables as inputs to the <md-paginator>. When those variables change, the paginator will pick them up and render them to the view.

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

这篇关于动态设置 md-paginator 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！