角度材料分頁和排序未按預期工作

Question

我已經實現了包含pagination and sorting角度材料數據表，但在從數據庫中獲取記錄后，它沒有按預期工作。

report.componenet.html：

<table mat-table matSort [dataSource]="dataSource">

          <!-- Position Column -->
          <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="hide-arrow"> Date </th>
            <td mat-cell *matCellDef="let element"> {{element.date}} </td>
          </ng-container>
      
          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
      
          <!-- Weight Column -->
          <ng-container matColumnDef="download">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Download </th>
            <td mat-cell *matCellDef="let element"> 
              <a [href]="element['download']['log']" target="_blank" *ngIf="element['download']['log'] !== ''" download>Log</a> <div *ngIf="element['download']['dataReport'] !== ''">|</div>
              <a [href]="element['download']['dataReport']" target="_blank" *ngIf="element['download']['dataReport'] !== ''">Data report</a> <div *ngIf="element['download']['htmlReport'] !== ''">|</div>
              <a [href]="element['download']['htmlReport']" target="_blank" *ngIf="element['download']['htmlReport'] !== ''">HTML report</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 
                       aria-label="Select page of periodic elements">
        </mat-paginator>

報告.component.ts：

displayedColumns: string[] = ['date', 'name', 'download'];
  dataSource = new MatTableDataSource<PeriodicElement>([]);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
getTestReportData() {
    this.loginService.startSpinner(true);
    this.service.fetchTestReportData().subscribe((resp: any) => {
      console.log('resp python', resp);
      this.loginService.startSpinner(false);
      if(resp.status && resp.status === 'success') {
        if(resp.body && resp.body.status && resp.body.status === 'success') {
          if(resp.body.data && resp.body.data.length > 0) {
            this.dataSource.data = resp.body.data;
            this.length = resp.body.data.length;
            console.log('datasource', this.dataSource);
          }
        }else{
          this.presentAlert(resp.msg, 'danger', ALERT_TIMEOUT);
        }
      }else{
        this.presentAlert(resp.msg, 'danger', ALERT_TIMEOUT);
      }
    })
  }

我正在從服務器獲取記錄並將它們附加到表中，但在這種情況下，分頁和排序都沒有得到反映。 檢查下面的示例輸出。

有兩條記錄，但它顯示0 of 0並且排序也沒有按預期工作。 我需要分頁號和排序應該按預期工作。 我該如何解決這個問題？

Answer 1

我有同樣的問題。 就我而言，我是這樣解決的。

組件.html

<app-loading *ngIf="isLoading$ | async"></app-loading>
<div *ngIf="(isLoading$ | async) === false">
   <ng-container *ngIf="dataSource.data.length >= 1; else noData">
      <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
      <mat-table [dataSource]="dataSource" matSort>
        ...
      </mat-table>
   </ng-container>
   <ng-template #noData>
      <h3>Ops...</h3>
      <p>There is no data...</p>
   </ng-template>
</div>

和 component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
...
export class Component implements OnInit {
  dataSource = new MatTableDataSource<any>();
  isLoading$: Observable<boolean>;
  paginator: MatPaginator;
  sort: MatSort;
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.dataSource.paginator = this.paginator;
  }
  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.dataSource.sort = this.sort;
  }

使用 ViewChild 綁定分頁器和排序以與服務器響應異步同步。 然后傳遞set以便能夠在分頁器、排序或過濾器中設置異步值...

ngAfterViewInit()循環將在組件初始化后立即運行。 並且可能服務還沒有響應數據。 正如我所說，在我的情況下，我可以使用 set 獲取異步分頁器與服務器響應的異步，請查看https://angular.io/api/core/ViewChild

繼續編碼 \\m/