Ngx-datatable在(组件) HTML中错误如何使用下拉框按列名排序表格(Angular 7)

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  imports: [
    // 其他模块
    NgxDatatableModule
  ],
  // 其他配置
})
export class AppModule { }

<ngx-datatable
  class="material"
  [rows]="data"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [reorderable]="true"
  [externalSorting]="true"
  (sort)="onSort($event)">
</ngx-datatable>

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  data = [
    // 数据源
  ];

  columns = [
    // 列的配置信息
  ];

  onSort(event) {
    const columnName = event.sorts[0].prop; // 获取选择的列名
    const direction = event.sorts[0].dir; // 获取排序方向

    // 根据选择的列名和排序方向进行排序逻辑

    // 更新数据源
    this.data = [...this.data];
  }
}