带垫表初始化的角度材料 2 分页器 [英] angular material 2 paginator with mat-table initialization

问题描述

我正在尝试使 angular material 2 paginator 组件与 table 组件(mat-table 指令)一起使用.

我按照 mat-table 文档添加了一个分页器，试图让他们的示例与我现有的工作 mat 表一起工作.

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

<mat-table [dataSource]="dataSource">//列和行</mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"[showFirstLastButtons]="true"></mat-paginator>

使用这个html的组件实现ngOnInit:

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

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

@ViewChild(MatPaginator) 分页器:MatPaginator;

<小时>

问题是分页器什么都不做，下一个和上一个按钮是灰色的.

<块引用>

console.log(this.paginator) 给出:

_changeDetectorRef: Object { _view: {…}, _viewContainerRef: null, _appRef: null }_displayedPageSizeOptions: Array(3) [ 5, 10, 20 ]_hidePageSize: 假_初始化:真_intl: Object { itemsPerPageLabel: "Items per page:", nextPageLabel: "Next page", previousPageLabel: "Previous page", ... }_intlChanges: Object { 关闭: false, syncErrorThrown: false, syncErrorThrowable: false, ... }_长度:0_页面索引:0_pageSize:10_pageSizeOptions: Array(3) [ 5, 10, 20 ]_showFirstLastButtons: true 页面: Object { _isScalar: false, closed: false, isStopped: false, ... }proto: Object { pageIndex: Getter &Setter，长度:Getter &Setter, pageSize: Getter &二传手，…… }

我不知道如何调试/理解导致分页器不工作的原因.

我的 BasicDataSource 扩展了 DataSource 并且使用 ngAfterViewInit 不起作用，因为此时 this.datasource 未定义(api 调用未完成).

解决方案

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

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

用空数组初始化数据源.

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

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.

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>

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);
          });
      });
  }

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.

The console.log(this.paginator) gives :

_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.

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屋！