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

【问题标题】：paginator is not reading data in angular分页器没有以角度读取数据
【发布时间】：2021-03-02 14:23:49
【问题描述】：

我正在尝试用有角材料的表格实现分页器。数据源来自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);
      })
  }

}

【问题讨论】：

标签： angular angular-material paginator

【解决方案1】：

在 html 中，您将 dataSource 绑定到 listaCasos。这将导致表格始终保持填满所有数据，因为分页器不响应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。

【讨论】：

有道理，但我做到了，现在没有读取数据。
@DanielChavarriaChavarrio 请检查编辑。
是的，现在确实可以使用了，非常感谢。您的答案得分最高。

【解决方案2】：

尝试使用

将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

【讨论】：