Angular 如何使物料表工作

我不熟悉角材料表，只想生成一个具有过滤器和排序功能的垫表。在一些在线教程之后，大部分部分都可以工作，但我无法让排序功能工作。 代码如下： HTML

我错过了什么吗？谢谢

<div class="table-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="table-container mat-elevation-z8">
    
    <mat-table [dataSource]="tableDataSource" matSort>
        
        <ng-container matColumnDef="gene">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Gene </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Gene}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="gDNAChange">
            <mat-header-cell *matHeaderCellDef mat-sort-header> gDNAChange </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.GDnaChange}} </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]="[5, 10, 25, 50, 100, 500]"></mat-paginator>
</div>

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { GenotypeQueryService } from 'src/app/service/genotype-query.service';
import { GenotypeQueryResult } from 'src/app/model/resultModel/genotype-query-result.model';
   
@Component({
  selector: 'app-genotype-results',
  templateUrl: './genotype-results.component.html',
  styleUrls: ['./genotype-results.component.css']
})
export class GenotypeResultsComponent {

  // this is mat table
  tableDataSource: MatTableDataSource<GenotypeQueryResult>;
  displayedColumns: string[] = ['gene', 'gDNAChange'];

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

  constructor(
    private genoQueryService: GenotypeQueryService{     
      this.tableDataSource = new MatTableDataSource(this.genoQueryService.genotypeQueryList);
  }

  /**
 * Set the paginator and sort after the view init since this component will
 * be able to query its view for the initialized paginator and sort.
 */
  ngAfterViewInit() {
    this.tableDataSource.paginator = this.paginator;
    this.tableDataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.tableDataSource.filter = filterValue;
  }
}

export class GenotypeQueryResult {
       Gene: string
       GDnaChange: string
       RandomPatientId: string
       OmimDisease: string
       Moi: string
       ScreeningMethod: string
       Transcript: string
       Location: string
}