Angular 物料数据表排序和分页不起作用

我正在使用角度材质数据表，但无法使

排序

或

分页

正常工作。我创建了一个共享组件，该组件将使用不同的数据集（不同的列名等等）多次重用。表格标题和行显示得很好（超过480行），但是当我单击排序按钮时，什么都没有发生，分页按钮被禁用。然而，我不知道我做错了什么

"dependencies": {
    "@angular/cdk": "~8.1.4",
    "@angular/common": "~8.2.4",
    "@angular/compiler": "~8.2.4",
    "@angular/core": "~8.2.4",
    "@angular/material": "^8.1.4"
},
"devDependencies": {
    "@angular/cli": "~8.3.3",
    "@angular/compiler-cli": "~8.2.4",
}

html

{{col}}
{{col}}：
{{data[col]}

组成部分

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

dataLoaded = false;
dataSource;
displayedColumns; 
pageSizeOptions: number[] = [];
tableData = [
    {
        email: "brk@gmail.com"
        id: 1
        name: "B. Reurk"
    },
    {
        email: "john@gmail.com"
        id: 2
        name: "J. Smith"
    },
    // another 480 results which show in the table just fine
];

ngOnInit()
{
    this.dataSource = new MatTableDataSource(this.tableData);
    for (let i = 25; i <= this.tableData.length + 25; i += 25) {
    this.pageSizeOptions.push(i);
}
    this.displayedColumns = ['email', 'id', 'name'];
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
}

@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
dataLoaded=false；
数据源；
显示列；
pageSizeOptions:number[]=[]；
tableData=[
{
电子邮件：“brk@gmail.com"
身份证号码：1
姓名：“B.勒克”
},
{
电子邮件：“john@gmail.com"
身份证号码：2
姓名：“J.史密斯”
},
//表中显示的另外480个结果很好
];
恩戈尼尼特（）
{
this.dataSource=新MatTableDataSource（this.tableData）；
对于（让i=25；i我想出来了。我必须删除包装表格的
*ngIf
，这很糟糕，因为现在我无法显示加载消息，但它可以工作了

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>
      <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{col}} </mat-header-cell>
        <mat-cell *matCellDef="let data">
          <!--  for mobile devices the columns collapse and each column is a row -->
          <span class="mobile-label">{{col}}:</span>
          {{data[col]}}
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator
      [pageSizeOptions]="pageSizeOptions"
      showFirstLastButtons>
    </mat-paginator>
</div>


{{col}}
{{col}}：
{{data[col]}
Paginator需要一段时间我没有*ngIf仍然无法在垫子上进行排序。有什么想法吗？谢谢
<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>
      <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{col}} </mat-header-cell>
        <mat-cell *matCellDef="let data">
          <!--  for mobile devices the columns collapse and each column is a row -->
          <span class="mobile-label">{{col}}:</span>
          {{data[col]}}
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator
      [pageSizeOptions]="pageSizeOptions"
      showFirstLastButtons>
    </mat-paginator>
</div>