Блог

Я пытаюсь реализовать paginator с таблицей в angular material. Источник данных поступает с Node.js сервера и работает нормально. Однако paginator похож на то, что он не читает таблицу данных. Я не получаю никаких ошибок, но это просто не работает. Действительно ценю ваши ответы.

Шаблон —

 <h3>Lista casos</h3>
<table mat-table [dataSource]="listaCasos" class="mat-elevation-z8">

    <ng-container matColumnDef="idcaso">
      <th mat-header-cell *matHeaderCellDef> ID Caso </th>
      <td mat-cell *matCellDef="let caso"> {{caso.ID_CASO}} </td>
    </ng-container>  

    <ng-container matColumnDef="estado">
      <th mat-header-cell *matHeaderCellDef> Estado </th>
      <td mat-cell *matCellDef="let caso"> {{caso.ESTADO_CASO}} </td>

    </ng-container>  

    <ng-container matColumnDef="causa">
        <th mat-header-cell *matHeaderCellDef> Causa </th>
        <td mat-cell *matCellDef="let caso"> {{caso.CAUSA}} </td>
    </ng-container> 

    <ng-container matColumnDef="detalles">
      <th mat-header-cell *matHeaderCellDef> Detalles </th>
      <td mat-cell *matCellDef="let caso"> 
        <a routerLink="/dashboard/gestion/{{caso.ID_CASO}}"><button mat-button>Ver caso</button></a>
      </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, 20]" showFirstLastButtons></mat-paginator>
 

Компонент —

 import { Component, OnInit } from '@angular/core';
import { CasosService } from './casos.service';
import { interCaso } from '../../interfaces/interCaso';
import {AfterViewInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-casos',
  templateUrl: './casos.component.html',
  styleUrls: ['./casos.component.css']
})
export class CasosComponent implements OnInit , AfterViewInit{

  listaCasos: interCaso[] = [];
  displayedColumns: string[] = ['idcaso' , 'causa' , 'estado' , 'detalles'];
  dataSource = new MatTableDataSource<interCaso>(this.listaCasos);

  constructor(private casosService: CasosService) { }

  ngOnInit(): void {
    this.getCasos();
  }

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

  
  getCasos(){
    this.casosService.getCasos()
      .subscribe((casos : interCaso[]) => {        
        this.listaCasos = casos;
        console.log(casos);
      })
  }

}
 

1. В HTML-формате, к которому вы привязываетесь dataSource listaCasos . Это приведет к тому, что таблица всегда будет оставаться заполненной всеми данными, потому что разбиение на страницы реагирует не на listaCasos свойство, а на dataSource свойство. Поэтому привязка должна быть к dataSource свойству —

 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 

2. В компоненте вы инициализируете dataSource listaCasos объявление with on . Но, listaCasos не будет заполнен данными до ngOnInit() тех пор, пока не будет вызван. Итак, не инициализируйте dataSource объявление on. Вместо этого заполните его внутри ngAfterViewInit() метода —

 // leave the dataSource uninitialized
dataSource = new MatTableDataSource<interCaso>();

//populate dataSource here
ngAfterViewInit() {
    this.dataSource.data = this.listaCasos;
    this.dataSource.paginator = this.paginator;
}
 

Редактировать :
Извините, что я тестировал со статическими данными. Но в вашем случае casosService данные извлекаются асинхронно, и есть вероятность ngAfterViewInit() , что они будут вызваны, пока данные еще не поступили. Поэтому было бы лучше, если бы вы заполнили данные внутри подписки на вызов службы —

 // populate dataSource here
getCasos(){
    this.casosService.getCasos()
      .subscribe((casos : interCaso[]) => {        
        //this.listaCasos = casos;
        this.dataSource.data = casos;
        console.log(casos);
      })
}
 

Вам больше ничего не понадобится listaCasos .

Попробуйте использовать

Назначить paginator для MatTable того, где вы присваиваете данные таблице.Попробуйте, как показано ниже,

 getCasos(){
    this.casosService.getCasos()
      .subscribe((casos : interCaso[]) => { 
        this.dataSource = new MatTableDataSource(casos);        
        this.dataSource.paginator = this.paginator;
    });
}
 

Рабочий stackblitz пример: https://stackblitz.com/edit/angular-uf1sdt-zv5te5?file=src/app/table-multiple-header-footer-example.html