动态数据的分页器/排序不起作用

Question

我有一个来自端点的数据并将其放入 MatTableDataSource。当我想使用分页或搜索时，我能够显示数据，但无法找到更新表格的方法，没有发生任何事情。

当我尝试使用静态数据时会更容易，但使用动态数据时，我只能一次显示所有数据并注意能够做更多事情。

预期的行为是什么？

通过分页器切换页面时，表格应该刷新。

目前的行为是什么？

通过分页器切换页面时表格不刷新。

重现的步骤是什么？

很遗憾，我无法提供功能性 Plunker，因为我使用的数据来自我的后端应用程序。

这是我当前的代码（它只是在表格中显示数据，搜索或分页都不起作用）

<mat-form-field>
    <mat-label>Search ID</mat-label>
    <input  (keyup)="applySearch($event.target.value)" matInput placeholder="Filter" >
  </mat-form-field>
<table mat-table [dataSource]="certifications"   class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let cert"> {{ cert.num }} </td>
    </ng-container>
  

    <ng-container matColumnDef="NumO">
      <th mat-header-cell *matHeaderCellDef> NumO </th>
      <td mat-cell *matCellDef="let cert"> {{cert.NumO}} </td>
    </ng-container>
  

    <ng-container matColumnDef="Name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let cert"> {{cert.Name}} </td>
    </ng-container>
  

    <ng-container matColumnDef="Unit">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let cert"> {{cert.Unit}} </td>
    </ng-container>


        <ng-container matColumnDef="State">
            <th mat-header-cell *matHeaderCellDef> State </th>
            <td mat-cell *matCellDef="let cert"> {{cert.State}} </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
          <!-- YOU CAN CHANGE THE PAGE SIZE HERE -->
        <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6]"   
      
      showFirstLastButtons></mat-paginator>
  

produits.component.ts

import { Component, OnInit,ViewChild } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Certification } from './produits';
import { ProduitService } from './produits.service'
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-produits',
  templateUrl: './produits.component.html',
  styleUrls: ['./produits.component.scss'],
})
export class ProduitsComponent implements OnInit {
  displayedColumns: string[] = [
    'num',
    'numO',
    'Name',
    'Unit',
    'State',
  ];
  certifications = new Array<Certification>()
  dataSource = new MatTableDataSource(this.certifications);

  applySearch(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }

  constructor(certService:ProduitService) {

    certService.getCertifications().subscribe(
      certifications => {
        this.certifications = certifications;
        console.log(this.certifications);
      }
    )

  }
  @ViewChild('paginator') paginator!: MatPaginator;

  ngOnInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    console.log('heeeeeeeeeeeey')
    this.dataSource = new MatTableDataSource(this.certifications);
    this.dataSource.paginator = this.paginator;
  }
  
}

Answer 1

好的，首先尝试避免在构造函数中调用 api 这不是一个好方法， 第二件事你将错误的数据传递给你的 html [dataSource]="certifications" 但是 可以给你这么简单明了的代码吗

/* Declaration */
displayedColumns: string[] = [
  'num',
  'numO',
  'Name',
  'Unit',
  'State',
];
/* this code will help you to refresh pagination  */
private paginator: MatPaginator;
private sort: MatSort;
@ViewChild(MatSort, {
  static: false
}) set matSort(ms: MatSort) {
  this.sort = ms;
  this.setPaginationAndSort();
}
@ViewChild(MatPaginator, {
  static: false
}) set matPaginator(
  mp: MatPaginator
) {
  this.paginator = mp;
  this.setPaginationAndSort();
}
certifications: any = new MatTableDataSource([]);
constructor(public certService: ProduitService) {}
ngOnInit() {
  this.getCertification()
}

getCertification() {
  this.certService.getCertifications().subscribe(
    certifications => {
      this.certifications = new MatTableDataSource(certifications);
      this.setPaginationAndSort()
      console.log(this.certifications);
    }
  )
}
setPaginationAndSort() {
  this.certifications.paginator = this.paginator;
  this.certifications.sort = this.sort;
}
  applySearch(filterValue: string) {
    this.certifications.filter = filterValue.trim().toLowerCase();

  }