Блог

У меня есть динамическая таблица в angular material, в которой я собираю данные с помощью API внешней базы данных. Я пытаюсь paginate найти таблицу, но нахожу только примеры таблиц с предопределенными данными и не могу ее адаптировать.

Я добавил свой html и свои текущие ts, в которых единственное, что я делаю,-это показываю данные в таблице, в 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>
 

Вы должны подать MatTableDataSource заявку в качестве источника данных, он содержит 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>
 

.компонент.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;
    });
  }
}
 

Решение по СтекбЛитцу

РЕКОМЕНДАЦИЯ(Ы)

 <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] этого вам следует просмотреть его и обязательно передать поддерживаемое значение для MatFormFieldAppearance , как указано в документации Angular.

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

Вы получите сообщение об ошибке, как показано ниже, если вы не отключили строгий режим для компилятора Angular в файле tsconfig.json.

Тип «нет» не может быть присвоен типу «MatFormFieldAppearance».

Для этого сценария я прокомментировал JSON angularCompilerOptions , чтобы решить упомянутую проблему.

tsconfig.json

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