角材料表分页器不起作用

Question

我正在尝试使用https://material.angular.io/components/table/overview分页示例对表进行分页，该示例已针对我的情况进行了修改。

当我尝试选择“每页项目数”选项时，按钮变得集中但没有任何反应，并且在控制台中出现以下错误：

core.js:6185 ERROR TypeError: Cannot read property 'pipe' of undefined
    at MatSelect.ngAfterContentInit (select.js:678)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11838)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshComponent (core.js:13229)

这是我的HTML：

<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z1" style="margin-top: 30px;">

        <ng-container matColumnDef="filter-header" >
            <mat-header-cell *matHeaderCellDef style="padding-top: 10px;">
                <mat-icon [matTooltip]="'Filter'" style="margin-right: 10px;">
                    search
                </mat-icon>
                <mat-form-field fxFlex>
                    <mat-label translate>Search number</mat-label>
                    <input name="ca-name-filter" matInput>
                </mat-form-field>
            </mat-header-cell>
        </ng-container>
        <!-- Position Column -->
        <ng-container matColumnDef="query">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Query </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.query}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="country">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.country}} </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="created">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.created}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="['filter-header']; sticky: true" class="filter-row"></mat-header-row>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
    </mat-table>
    <mat-paginator [length]="length" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons></mat-paginator>

这是.ts文件：

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

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

  dataSource = new MatTableDataSource(ELEMENT_DATA);
  displayedColumns: string[] = ['query', 'country', 'created'];
  length = 0;
  pageSizeOptions = [5, 10, 20];
  page = 1;
  pageSize = 3;

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

  constructor() { }

  ngOnInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }


}

export interface PeriodicElement {
  query: string;
  country: string;
  created: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { query: '0000000000', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0712345678', country: 'Romania', created: '2020-08-18 22:10' },
  { query: '0999999999', country: 'Romania', created: '2020-08-18 22:10' },
];

关于如何解决此问题的任何想法？我还尝试了页面上的示例，没有做任何改动，并且仍然是相同的行为。