Angular Material MatPaginator 显示第 0 页（共 0 页）

Question

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

组件.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>

组件.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

尝试在

中添加#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 对象声明为：

dataSource! = MatTableDataSource<UserData>;

而不是

dataSource = new MatTableDataSource<UserData>(USER_DATA);

然后，当promise解决后，这样分配内容

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

而不是

this.dataSource = data["data"]

紧接着，将paginator组件分配给dataSource.paginator：

this.dataSource.paginator = this.paginator;

Answer 2

尝试删除

AfterView

并将

ViewChild

替换为以下代码：

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

Answer 3

我需要添加

this.paginator.length = +data.meta.total;

以便分页器的 length 属性知道可能的总项目数，并可以计算分页。

添加，ng 文档中的示例没有显示这一点，文档显示为“硬编码”值。

ng 文档需要工作！

Answer 4

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

像这样：

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

在文档中：

static - True 在更改检测运行之前解析查询结果， false 在更改检测后解决。默认为 false。

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

Answer 5

我修改了我的 html 和 TS 文件如下，它对我有用。

HTML 添加了#paginator

<mat-paginator #paginator [pageSizeOptions]="[6, 12, 18, 24]" showFirstLastButtons ></mat-paginator>

删除了 ngAfterViewInit 并将其替换为：

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