分页器未读取 angular 中的数据

Question

我正在尝试在 angular material 中使用 table 实现一个分页器。数据源来自 Node.js 服务器并且工作正常。但是分页器就像不读取数据一样table。我没有收到任何错误，但它根本不起作用。非常感谢您的回答。

模板 -

<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);
      })
  }

}

Answer 1

在 html 中，您将 dataSource 绑定到 listaCasos。这将导致 table 始终保持填满 all 数据，因为分页器不响应 listaCasos 属性，它响应到 dataSource 属性。因此，绑定应该是 dataSource 属性 -

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

在组件中，您在声明时用 listaCasos 初始化 dataSource。但是，在 ngOnInit() 被调用之前，listaCasos 不会填充数据。所以，不要在声明时初始化 dataSource 。而是在 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。

Answer 2

尝试使用

为 MatTable 分配 paginator，其中您将数据分配给 table.Try，如下所示，

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

分页器未读取 angular 中的数据

paginator is not reading data in angular

paginator

angular-material

angular

尝试使用