angular нумерация данных таблицы данных на стороне сервера с сортировкой по умолчанию не работает

Question

Я реализовал server side pagination в angular material data table, он работает нормально, но сортировка по умолчанию не работает в таблице данных материала.

Я обнаружил, что, когда я помещаю * ngIf (* ngIf = "source == 'list'") в файл html, сортировка не работает.

Данные по умолчанию сортировка таблицы должна работать, так как не нужно реализовывать сортировку на стороне сервера, поскольку таблица данных материала уже обеспечивает сортировку.

html:

<div *ngIf="source == 'list'" class="material-table-container">
    <mat-table #table matSort [dataSource]="dataSource">
        <ng-container *ngFor="let column of columnHeader" [cdkColumnDef]="column.columnDef">
            <mat-header-cell mat-sort-header [disabled]="column.columnSort" [hidden]="column.columnHide"
            *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
            <mat-cell [hidden]="column.columnHide" title="{{column.cell(row)}}" *cdkCellDef="let row">
                <a *ngIf="column.source=='customer'" [routerLink]="['detail/', row.customerKey]">
                       {{ column.cell(row) | slice:0:40 }}{{ column.cell(row).length > 40 ? ' ...' : ''}}
                </a>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator (page)="onPageChanged($event)" class="mat-paginator-sticky" [length]="resultsLength" [pageSize]="pageSize" showFirstLastButtons></mat-paginator>
</div>

тс:

pageSize = 500;
resultsLength = 0;
param: any;
@Input() source;
ngOnInit() {
 let startIndex = 0;
 let endIndex = this.pageSize;
 this.getData(startIndex, endIndex);
}

getData(start,end) {
this.param = { "start": start, "end": end };
this.list.APIMyList(this.param).subscribe(res => {
 this.tableData = res;
 this.resultsLength = this.tableData[0].count;
 this.dataSource = new MatTableDataSource(this.tableData);
 this.dataSource.sort = this.sort;
 this.dataSource.paginator = this.paginator;
 this.displayedColumns = this.columnHeader.map(c => c.columnDef);
 });
}

onPageChanged(e) {
    let startIndex = (e.pageIndex * e.pageSize) + 1;
    let endIndex = (startIndex + e.pageSize) - 1;
    this.getData(startIndex, endIndex);
}