在Angular材质Angular 6中切片不支持分页

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-paginator-example',
  templateUrl: './paginator-example.component.html',
  styleUrls: ['./paginator-example.component.css']
})
export class PaginatorExampleComponent implements OnInit {
  dataSource: any[] = []; // 定义数据源
  pageSize = 10; // 每页显示的项数
  pageIndex = 0; // 当前页码

  @ViewChild(MatPaginator) paginator: MatPaginator; // 获取MatPaginator实例

  constructor() { }

  ngOnInit() {
    // 从API或其他资源获取数据源
    // this.dataSource = ... ;
  }

  ngAfterViewInit() {
    // 设置MatPaginator组件的相关属性
    this.paginator.pageSize = this.pageSize;
    this.paginator.pageIndex = this.pageIndex;
    this.paginator.length = this.dataSource.length;
  }

  updateDataSource() {
    // 根据当前页码和每页显示的项数切片数据源
    const startIndex = this.pageIndex * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    this.dataSource.slice(startIndex, endIndex);
  }
}

<table>
  <tr *ngFor="let data of dataSource | slice:paginator.pageIndex * paginator.pageSize:(paginator.pageIndex + 1) * paginator.pageSize">
    <!-- 显示数据项 -->
  </tr>
</table>

<mat-paginator
  [length]="dataSource.length"
  [pageSize]="pageSize"
  [pageIndex]="pageIndex"
  (page)="updateDataSource()">
</mat-paginator>