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

Posted 2023-03-13

【中文标题】动态数据的分页器/排序不起作用

【英文标题】：Paginator/Sorting for dynamic data does not work

【发布时间】：2021-07-07 13:57:52

【问题描述】：

我有一个来自端点的数据并将其放入 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;
  
  

【参考方案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();

  

【讨论】：

首先非常感谢 Jasmine，我尝试按照您的操作进行操作，不幸的是它没有用，然后我复制了 getCertification() 的正文后出现 Property 'certService' does not exist on type 'ProduitsComponent'. 之类的错误 ... 并将其放入构造函数 中，它确实按预期工作。我真的很迷茫，因为现在它正在工作，但我不知道如何解释。

constructor (public certService: ProductService) 只需在 certService 之前添加“public”我忘记了，当您尝试调用 certService 时使用“this.certService”它会起作用，问题在你您在 html 中使用“证书”数组的代码，但在 ts 中，您将所有处理应用于 dataSource 数组，这就是您的表不会更改的原因

按预期工作，非常感谢 Jasmine。