mat-sort 和 mat-paginator 不適用於 Angular Material mat-table

Question

我試圖在我的 Material 表上使用 mat-sort 和 mat-paginator，這似乎不起作用。 Table 確實在 dataSource.data 中獲取數據，它也顯示在 mat-table 中，但 dataSource.sort 和 dataSource.paginator 屬性保持undefined 。 我試圖按照其他類似問題中的建議，將值分配給 ngOnInit() 和 ngAfterViewInit() 中的兩個屬性，例如這里的問題： mat-sort not working on mat-table ，但似乎沒有任何效果。 下面是相同的代碼。 Angular Material 的版本是 8.2.3，Angular 的版本是 8.3.25。 我會很高興得到任何幫助。 提前致謝 ：）

員工列表.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { RestApiService } from '../shared/rest-api.service';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material'; // Service used for Snackbar, Dialog,


@Component({
  selector: 'app-employees-list',
  templateUrl: './employees-list.component.html',
  styleUrls: ['./employees-list.component.scss']
})
export class EmployeesListComponent implements OnInit, AfterViewInit {

  public Employee: any = [];
  public dataSource: any;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  displayedColumns: string[] = ['id', 'name', 'email', 'phone', 'actions'];

  constructor(public restApi: RestApiService) { }

  ngOnInit() {
    this.loadEmployees();
  }

  // Get employees list
  loadEmployees() {
    return this.restApi.getEmployees().subscribe((data: {}) => {
      console.log(data);
      this.Employee = data;
      this.dataSource = new MatTableDataSource(this.Employee);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      console.log(this.dataSource);
    });
  }

  ngAfterViewInit() {
  }

  // Delete employee
  deleteEmployee(id) {
    if (window.confirm('Are you sure, you want to delete?')) {
      this.restApi.deleteEmployee(id).subscribe(data => {
        this.loadEmployees();
      });
    }
  }

}

員工列表.component.html

<div *ngIf="Employee.length !== 0">

  <span class="mat-headline">Employee List</span>

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

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


    <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>


    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>


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

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> Actions </th>   
      <td mat-cell *matCellDef="let element"> 
        <button mat-raised-button routerLink="/employee-edit/{{element.id}}" color="primary"
        style="margin-right: 0.25rem;"><mat-icon>edit</mat-icon></button> 
        <button mat-raised-button (click)="deleteEmployee(element.id)" color="warn"><mat-icon>delete</mat-icon></button> 
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
  </table>
</div>

Answer 1

問題是當你渲染你的組件時你有這個

*ngIf="Employee.length !== 0

所以現在你沒有任何東西在你的視野中，直到你的條件變為真，此時你的

 @ViewChild(MatSort, { static: true }) sort: MatSort;
 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

正在嘗試從視圖中捕獲排序和分頁器，但您的視圖沒有任何內容，因為此時您的條件不正確，因此如果您嘗試刪除條件，一切都會正常

Answer 2

使用setter解決問題

  @ViewChild(MatSort, { static: false })
  set sort(v: MatSort) {
   this.dataSource.sort = v;
  }

  @ViewChild(MatPaginator, { static: false })
  set paginator(v: MatPaginator) {
    this.dataSource.paginator = v;
  }