Angular 6-如何向材料表添加分页

npm install --save @angular/material @angular/cdk

import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // other imports
    MatPaginatorModule
  ],
  // other configurations
})

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';

@Component({
  // component configurations
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private paginatorIntl: MatPaginatorIntl) {}

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.paginator._intl = this.paginatorIntl; // 设置分页器的国际化
  }
}

import { HttpClient, HttpParams } from '@angular/common/http';

export class YourComponent {
  dataSource: YourDataSource;

  constructor(private http: HttpClient) {
    const params = new HttpParams()
      .set('page', '1')
      .set('pageSize', '10');

    this.http.get('your-api-url', { params }).subscribe(data => {
      this.dataSource = new YourDataSource(data);
    });
  }
}