Angular Material MatPaginator 显示第 0 页，共 0 页

Question

抱歉提前提问。在写这篇文章之前，我用谷歌搜索了我的问题并尝试了很多解决方案，但没有成功。我是一个 Angular 菜鸟，正在努力学习 Material。我的简单项目发出了一个 http 请求，并使用接收到的 JSON 来填充 table。 Angular Material table 工作正常，但分页器不是。它呈灰色并显示第 0 页，共 0 页。

component.html如下：

<div style="height: 80vh;">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span>Teste - Requisição Http/Tabela</span>
      <span class="menu-spacer"></span>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav>
      <mat-nav-list>
        <a (click)="sidenav.toggle()" mat-list-item>Fechar</a>
        <a href="#" mat-list-item>Link 1</a>
        <a href="#" mat-list-item>Link 2</a>
        <a href="#" mat-list-item>Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

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

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

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

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

        <ng-container matColumnDef="avatar">
          <th mat-header-cell *matHeaderCellDef> Avatar </th>
          <td mat-cell *matCellDef="let element"> {{element.avatar}} </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, 25, 100]" showFirstLastButtons></mat-paginator>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

component.ts如下：

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

export interface UserData {
  id: number;
  email: string;
  first_name: string;
  last_name: string;
  avatar: string;
}

const USER_DATA: UserData[] = [];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Test';
  url = 'https://reqres.in/api/users?page=1';
  displayedColumns: string[] = ['id', 'email', 'first_name', 'last_name', 'avatar'];
  dataSource = new MatTableDataSource<UserData>(USER_DATA);
 
  constructor(private http: HttpClient) {
  
    this.http.get(this.url).toPromise().then(data => {
      console.log(data["data"]);
      this.dataSource = data["data"]
      console.log(this.dataSource)
    });
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

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

我做错了什么？谢谢

Answer 1

在 angular 的文档中，他们忘记添加了，您需要定义 {static: false} 或 {static: true} 。

像这样：

@ViewChild(MatPaginator, {static:false}) paginator: MatPaginator;

在文档中：

static - True to resolve query results before change detection runs, false to resolve after change detection. Defaults to false.

如果要使用默认值，需要将其设置为 false。

Answer 2

尝试在

中添加#paginator

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

应该是：

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

如果没有 ID“#paginator”，@ViewChild 装饰器将永远无法找到该元素（此 ID 必须与 @ViewChild 装饰器行中使用的相同）。这个小细节没有包含在 Angular Material 文档的分页示例中（或者我看不到它..）

除此之外，尝试将数据源对象声明为：

dataSource! = MatTableDataSource<UserData>;

而不是

dataSource = new MatTableDataSource<UserData>(USER_DATA);

然后，当promise被resolve的时候，这样分配内容

this.dataSource = new MatTableDataSource<UserData>(data.data);

而不是

this.dataSource = data["data"]

之后，立即将分页器组件分配给 dataSource.paginator:

this.dataSource.paginator = this.paginator;

Answer 3

尝试删除 AfterView 并将 ViewChild 替换为以下代码：

@ViewChild(MatPaginator) set matPaginator(paginator: MatPaginator) {
    this.dataSource.paginator = paginator;
}

Angular Material MatPaginator 显示第 0 页，共 0 页

Angular Material MatPaginator showing page 0 of 0

angular-material

angular-material-table

angular-material-paginator