在表上使用 Angular 分页器以及从父级传递的数据

Question

我目前正在尝试弄清楚如何正确使用 Angular Materials 中的分页器和表格。我可以显示数据，但我花了几个小时试图找出如何让分页器工作。 至于我的结构，我有一个父组件，其中包含一个子组件并通过 @Input 将数据传递给它。

在我的父组件 HTML 中：

 <div class="row"><app-export-preview [dataSource]="tableDataFilterResult"></app-export-preview></div>

在我的父组件 TS 中，我执行 REST 调用并像这样设置我的数据

  this.filterResult = response[0]['records'];
  this.tableDataFilterResult = new MatTableDataSource<any>(this.filterResult);

REST-Call 在按钮之后调用，因此基本上分页器和表格先于任何数据存在。

在我的子组件 TS 中：

export class ExportPreviewComponent implements OnInit, AfterViewInit {

  displayedColumns: string[] = ['number', 'name', 'reference', 'date', 'creator', 'coordinates', 'recordId'];

  @Input()
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;


  constructor() {

  }


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

  ngOnInit(): void {
    this.dataSource.data = this.dataSource.data;
  }
}

我的子组件 HTML 中的分页器如下所示：

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

我对 Angular 很陌生，我已经尝试了一段时间来寻找解决方案。如果有人知道如何让分页器工作，我将不胜感激！

Answer 1

要在分页器中使用数据源，您需要首先将数据源传递到父组件中，然后计算数据源中的长度（总项目数）。然后就可以设置子分页控件的参数了。

尝试像这样作为起点：

export class ExportPreviewComponent implements OnInit, AfterViewInit {

    _currentPage: number = 0;
    _numberOfPages: number;
    _itemsPerPage: number = 10;
    _totalItems: number;
    _dataSource: any;

    @ViewChild("paginator", {static: true}) paginator;

    get itemsPerPage() { return this._itemsPerPage; }
    get numberOfPages() { 
        return Math.ceil(this._totalItems / this._itemsPerPage); 
    }
    get currentPage() { return this._currentPage; }
    get totalItems() { return this._totalItems; }

    @Input("dataSource") 
    set dataSource(value: any) 
    { 
       this._dataSource = value; 
       this._totalItems = value.length;
    } 

    onSelect(value: PageEvent)
    {
        this._currentPage = this.paginator.pageIndex;
        this._numberOfPages = this.paginator.getNumberOfPages();
        this._itemsPerPage = this.paginator.pageSize;
    }


    ...

在父组件 html 模板 (export-preview.component.html) 中，设置子分页组件，如下所示：

<mat-paginator  #paginator
            [length]="totalItems"
            [pageSize]="itemsPerPage"
            [pageSizeOptions]="[5, 10, 25, 100]"
            (click)="onSelect($event)">
</mat-paginator>

对于您的父组件，您可以像这样输入数据源：

<app-export-preview
    [dataSource]=yourDataSource>
    .. 
</app-export-preview>

其中 .. 是您想要传递给父组件的任何其他参数。

Answer 2

根据 Angular Material 文档，Mat-Paginator 采用几个预定义的属性。

这取自 Stackblitz 示例。

<mat-paginator
   [length]="100"
   [pageSize]="10"
   [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

要每页显示 5 个结果，

[pageSize]="5"

绑定应该有效。

Stackblitz 分页器示例