paginator没有读取angular中的数据

Question

我试图实现一个分页器表在角材料。数据源来自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);
})
}
}

Answer 1

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

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

2. 在组件中，您在声明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，其中u将数据分配给表。尝试如下，

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

Workingstackblitz例子:https://stackblitz.com/edit/angular-uf1sdt-zv5te5?file=src/app/table-multiple-header-footer-example.html