Angular Material matpaginator不显示数据答案

【问题标题】：Angular material matpaginator not displayig dataAngular Material matpaginator不显示数据
【发布时间】：2020-06-09 09:19:51
【问题描述】：

我正在尝试在 Angular 8 中创建数据表。但是数据表下面的分页器不起作用。我的组件中有 10 条硬编码记录。当我每页选择 5/10 个元素时，结果不会改变。它旁边的按钮也是灰色的。

import { Component, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator: MatPaginator;

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

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element"></td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>

【问题讨论】：

也许这个类似问题的答案可以帮助你：stackoverflow.com/questions/48785965/…

标签： angular angular-material

【解决方案1】：

你实现了控制器吗？

.html

    <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)"
         [ngModelOptions]="{updateOn: 'blur'}" placeholder="Ex. 10,25,50">

.ts

    setPageSizeOptions(setPageSizeOptionsInput: string) {
    if (setPageSizeOptionsInput) {
      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
    }
  }

【讨论】：

【解决方案2】：

我通过添加这个解决了这个问题。

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

【讨论】：