为什么排序在 mat-table 中不起作用？

告诉我为什么在表格中排序不起作用，我按照Angular Material官方文档中的示例做所有事情

模板代码：

<h5 class="card-title">****************</h5>

<table mat-table [dataSource]="tabledata" matSort *ngIf="isLoaded">
  <ng-container matColumnDef="Фамилия, имя, отчество">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Фамилия, имя, отчество </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="скилл P">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> скилл P </th>
    <td mat-cell *matCellDef="let element"> {{element.skillP}} </td>
  </ng-container>
  <ng-container matColumnDef="скилл A">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> скилл A </th>
    <td mat-cell *matCellDef="let element"> {{element.skillA}} </td>
  </ng-container>
  <ng-container matColumnDef="скилл E">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> скилл E </th>
    <td mat-cell *matCellDef="let element"> {{element.skillE}} </td>
  </ng-container>
  <ng-container matColumnDef="скилл I">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> скилл I </th>
    <td mat-cell *matCellDef="let element"> {{element.skillI}} </td>
  </ng-container>
  <ng-container matColumnDef="Подразделение">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Подразделение </th>
    <td mat-cell *matCellDef="let element"> {{element.department}} </td>
  </ng-container>
  <ng-container matColumnDef="Должность">
    <th mat-header-cell *matHeaderCellDef> Должность </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

这是组件代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Subscription, combineLatest } from 'rxjs';

import { PersonsService } from 'src/app/shared/services/persons.service';
import { PaeiService } from 'src/app/shared/services/paei.service';
import { Paei } from 'src/app/assessment/paei-test/models/paei.model';
import { Person } from 'src/app/shared/models/person.model';
import { MatTableDataSource, MatSort } from '@angular/material';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'mvv-paei-table',
  templateUrl: './paei-table.component.html',
  styleUrls: ['./paei-table.component.scss']
})

export class PaeiTableComponent implements OnInit {

  sub: Subscription;
  personsList: Person[] = [];
  paeiList: Paei[] = [];
  persons: {
    name: string,
    skillP: number,
    skillA: number,
    skillE: number,
    skillI: number,
    department: string,
    position: string
  }[] = [];

  tabledata: any;


  public displayedColumns = [
    'Фамилия, имя, отчество',
    'скилл P',
    'скилл A',
    'скилл E',
    'скилл I',
    'Подразделение',
    'Должность'
];
  isLoaded = false;

  constructor(
    private personsService: PersonsService,
    private paeiService: PaeiService,
  ) { }

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {

    this.sub = combineLatest(
      this.personsService.getPersons(),
      this.paeiService.getAllPaei()
    ).subscribe(value => {
      value[0].forEach(doc => {
        const person = new Person(
          doc.data().name,
          doc.data().middleName,
          doc.data().surname,
          doc.data().gender,
          doc.data().date,
          doc.data().position,
          doc.data().department,
          doc.id
        );
        this.personsList.push(person);
      });

      value[1].forEach(doc => {
        const paei = new Paei(
          doc.data().id,
          doc.data().date,
          doc.data().skillP,
          doc.data().skillA,
          doc.data().skillE,
          doc.data().skillI,
          doc.data().isReaded
        );
        this.paeiList.push(paei);
      });
      for (let i = 0; i < this.paeiList.length; i++) {

        const pers = this.personsList.filter(
          res => res.personId === this.paeiList[i].id);
          const name = pers[0].surname + ' ' + pers[0].name + ' ' + pers[0].middleName;
          this.persons.push(
            {
              name: name,
              skillP: this.paeiList[i].skillP,
              skillA: this.paeiList[i].skillA,
              skillE: this.paeiList[i].skillE,
              skillI: this.paeiList[i].skillI,
              department: pers[0].department,
              position: pers[0].position
            }
          );

          this.tabledata = new MatTableDataSource(this.persons);

        }
        this.isLoaded = true;

        setTimeout(() => {
          this.tabledata.sort = this.sort;
          console.log('проверка сортировки', this.sort);
        }, 1000);

      });

  }

}

不要注意超时。