分页器没有以角度读取数据

编程问答 2022-05-23

问题描述

我正在尝试用有角度的材料实现一个带有表格的分页器。数据源来自 Node.js 服务器并且工作正常。然而分页器就像不读取数据表。我没有收到任何错误，但它根本不起作用。非常感谢您的回答。

模板 -

<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">
  1. 在组件中，您在声明时使用 dataSource 初始化 listaCasos。但是，在调用 listaCasos 之前，ngOnInit() 不会填充数据。因此，不要在声明时初始化 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。

,

尝试使用

为 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

angularangularangular-materialpaginator