Таблица данных материала Сортировка и разбиение на страницы не работают

Question

Я использую таблицу угловых материалов, но не могу заставить sort или pagination работать.Я создал общий компонент, который будет многократно использоваться с разными наборами данных (поэтому разные имена столбцов и тому подобное).Заголовок таблицы и строки отображаются очень хорошо (более 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

<div *ngIf="dataLoaded" 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>

компонент

@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;
}

Answer 1

Я понял это.Мне пришлось удалить *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>