角形材料2分页器，带垫台初始化 [英] angular material 2 paginator with mat-table initialization

问题描述

我正在尝试使角材料2分页器组件与表格组件一起工作(mat-table指令).

I'm trying to make the angular material 2 paginator component work with the table component (mat-table directive).

我按照垫子表格文档添加了分页器，试图使它们的示例与我现有的工作垫子表格一起工作.

I followed the mat-table documentation to add a paginator, trying to make their example work with my existing working mat table.

在component.html中，我有一个工作垫表和一个分页器:

In the component.html I have a working mat table, and a paginator:

<div class="example-container">
    <mat-table [dataSource]="dataSource">
    // columns and rows
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>

使用此html的组件实现ngOnInit:

The component that uses this html implements ngOnInit:

ngOnInit() {
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

该组件使用@ViewChild获取分页器:

And the component gets the paginator using @ViewChild:

@ViewChild(MatPaginator) paginator: MatPaginator;

---

问题是分页器不执行任何操作，并且下一个和上一个按钮显示为灰色.

---

The issue is the paginator does nothing and the next and previous buttons are greyed out.

console.log(this.paginator)给出:

The console.log(this.paginator) gives :

_changeDetectorRef:对象{_view:{…}，_viewContainerRef:null，_appRef:null} _displayedPageSizeOptions:Array(3)[5，10，20] _hidePageSize:false _initialized:是的 _intl:对象{itemsPerPageLabel:每页项:"，nextPageLabel:下一页"，previousPageLabel:上一页"，…}} _intlChanges:对象{已关闭:否，syncErrorThrown:否，syncErrorThrowable:否，}} _length:0 _pageIndex:0 _pageSize:10 _pageSizeOptions:Array(3)[5，10，20] _showFirstLastButtons:true页面:对象{_isScalar:false，已关闭:false，isStopped:false，…} _ proto :对象{pageIndex:Getter&塞特犬，长度:吸气剂& Setter，pageSize:Getter&塞特犬，...}

_changeDetectorRef: Object { _view: {…}, _viewContainerRef: null, _appRef: null } ​ _displayedPageSizeOptions: Array(3) [ 5, 10, 20 ] ​ _hidePageSize: false ​ _initialized: true ​ _intl: Object { itemsPerPageLabel: "Items per page:", nextPageLabel: "Next page", previousPageLabel: "Previous page", … } ​ _intlChanges: Object { closed: false, syncErrorThrown: false, syncErrorThrowable: false, … } ​ _length: 0 ​ _pageIndex: 0 ​ _pageSize: 10 ​ _pageSizeOptions: Array(3) [ 5, 10, 20 ] ​ _showFirstLastButtons: true ​ page: Object { _isScalar: false, closed: false, isStopped: false, … } ​ proto: Object { pageIndex: Getter & Setter, length: Getter & Setter, pageSize: Getter & Setter, … }

我不知道如何调试/了解导致分页器无法正常工作的原因.

I don't know how to debug / understand what causes the paginator not to work.

我的BasicDataSource扩展了DataSource，并且无法使用ngAfterViewInit，因为此时this.datasource尚未定义(API调用未完成).

My BasicDataSource extends DataSource and using ngAfterViewInit doest work because this.datasource is undefined at this point (api call not done).

推荐答案

在视图初始化后初始化分页器.

Initialize paginator after view init.

 ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

使用空白数组初始化数据源.

Initialize datasource with blank array.

ngOnInit() {
            this.dataSource = new BasicDataSource([]);
    myapi.apirequest()
          .subscribe((dataResponse: any) => {
            this.dataSource = new BasicDataSource(dataResponse);
            this.dataSource.paginator = this.paginator;
            console.log(this.paginator);
          });
      });
  }

这篇关于角形材料2分页器，带垫台初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！