在 angular material 中动态分页 table

Question

我在 angular material 中有一个动态 table，我使用 API 从外部数据库收集数据。我正在尝试 paginate table，但我只找到带有预定义数据的 table 的示例，我无法对其进行调整。

我添加了我的 html 和我当前的 ts，其中我唯一做的就是在 table 中显示数据，在 html 我添加了 mat- paginator 标签来显示它，但我不知道如何让它在 ts 中工作。

这是我的 component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ClientService } from '../../services/clients.service';
import { Client } from '../../domain/clients';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

export class ClientsComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;

  public displayedColumns: string[] = ['name'];
  public client: Client;
  public clients: Client[];

  constructor(
    public fb: FormBuilder,
    private clienteService: ClienteService
  ) { }

  ngOnInit() {
    this.getClients();
  }

  getClientes() {
    this.clienteService.list()
    .subscribe(client => this.clientes = client);
  }

}

这是我的 component.html:

<div class="title">Customers</div>
<mat-divider></mat-divider>

<div fxLayout="column" fxLayoutGap="10px" class="m-3">
  <mat-card class="mat-elevation-z8">
    <mat-table [dataSource]="clients">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
            <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i">
          </mat-form-field>
        </mat-cell>
      </ng-container>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let col; columns: displayedColumns;"></mat-row>

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

Answer 1

您应该应用 MatTableDataSource 作为数据源，它包含用于 table 分页的 paginator 属性。

解决方案

.component.html

<mat-table [dataSource]="this.dataSource">

    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let client; let i = index">
          <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
            <input matInput placeholder="{{client.name}}" [(ngModel)]="client.name" [readonly]="editIndex!=i">
          </mat-form-field>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let col; columns: displayedColumns;"></mat-row>
    
</mat-table>

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

.component.ts

export class ClientsComponent implements OnInit {
  ...

  dataSource: MatTableDataSource<Client>;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ...

  getClients() {
    this.clienteService.list().subscribe(client => {
      this.clients = client;
      this.dataSource = new MatTableDataSource(this.clients);
      this.dataSource.paginator = this.paginator;
    });
  }
}

Solution on StackBlitz

建议（S）

<mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
    <input matInput placeholder="{{client.name}}" [(ngModel)]="client.name" [readonly]="editIndex!=i">
</mat-form-field>

对于 [appearance]，您应该查看它并确保传递 Angular documentation.

中列出的支持的 MatFormFieldAppearance 值

type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

如果你没有在tsconfig.json.

中关闭Angular编译器的严格模式，你将得到如下错误

Type '"none"' is not assignable to type 'MatFormFieldAppearance'.

对于这种情况，我为 angularCompilerOptions 评论了 JSON 以解决上述问题。

tsconfig.json

{
  ...
},
// "angularCompilerOptions": {
//   "enableIvy": true,
//   "fullTemplateTypeCheck": true,
//   "strictInjectionParameters": true
// }

在 angular material 中动态分页 table

Paginate dynamic table in angular material

angular

typescript

pagination

angular-material

angular11

解决方案

建议（S）