如何使用数据表在angular7中设置搜索框、排序和分页

ng add @angular/material

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    FormsModule
  ],
  // ...
})
export class YourModule { }

export interface YourData {
  name: string;
  age: number;
  // ...
}

export class YourComponent implements OnInit {
  dataSource: MatTableDataSource<YourData>;
  displayedColumns: string[] = ['name', 'age', ...]; // 列名

  ngOnInit() {
    // 初始化数据源
    this.dataSource = new MatTableDataSource<YourData>(yourDataArray);
  }
}

<!-- 搜索框 -->
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="搜索">
</mat-form-field>

<!-- 数据表 -->
<table mat-table [dataSource]="dataSource" matSort>

  <!-- 列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>姓名</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>年龄</th>
    <td mat-cell *matCellDef="let element">{{element.age}}</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></mat-paginator>

export class YourComponent implements OnInit, AfterViewInit {
  // ...

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    // 设置排序和分页
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  applyFilter(filterValue: string) {
    // 执行搜索
    this.dataSource.filter = filterValue.trim().toLowerCase();

    // 重置分页
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}