在Angular matTable中防止点击时排序为输入

<table mat-table [dataSource]="data">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef (click)="sortData('name')">Name</th>
    <td mat-cell *matCellDef="let item">{{ item.name }}</td>
  </ng-container>
  <!-- 其他列的定义 -->
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  data = [
    { name: 'John', age: 25 },
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 20 }
  ];

  displayedColumns = ['name', 'age'];

  sortData(column: string) {
    // 根据点击的表头进行排序
    this.data.sort((a, b) => {
      if (a[column] < b[column]) {
        return -1;
      } else if (a[column] > b[column]) {
        return 1;
      } else {
        return 0;
      }
    });
  }
}