mat-sort 和 mat-paginator 不适用于 Angular Material mat-table

Question

我试图在我的 Material table 上使用 mat-sort 和 mat-paginator，但似乎不起作用。 Table 确实获取了 dataSource.data 中的数据，它也显示在 mat-table 中，但是 dataSource.sort 和 dataSource.paginator 属性保持 未定义。我已尝试按照其他类似问题的建议将值分配给 ngOnInit() 和 ngAfterViewInit() 中的属性：，但似乎没有任何效果。下面是相同的代码。 Angular Material的版本是8.2.3，Angular的版本是8.3.25。我很乐意提供任何帮助。提前致谢:)

员工-list.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();
      });
    }
  }

}

员工-list.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;
  }

mat-sort 和 mat-paginator 不适用于 Angular Material mat-table

mat-sort and mat-paginator not working on Angular Material mat-table

angular

angular-material

angular-material2

angular-material-table