matSortを使用してマットテーブルの列を並べ替えるにはどうすればよいですか？

マットテーブルに並べ替えを実装しようとしていますが、まったく機能しません。エラーは発生していません。

これが私のコードです。

これは私のcomponent.tsファイルです

export class TerminalsComponent implements OnInit {

      cols: string[] = ['select', 'serialKey', 'cameras', 'status', 'activeSince', 'created', 'updated', 'addCamera', 'more'];

      success: boolean;
      message: string;

      dataSource;

      expandedElement: any;

      initialSelection = [];
      allowMultiSelect = true;
      selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);

      @ViewChild(MatSort) sort: MatSort;
      constructor(public cs: Service) {

        this.getTerminals();
      }

      masterToggle() {
        this.isAllSelected() ?
          this.selection.clear()
          : this.dataSource.data.forEach(row => this.selection.select(row));
      }

      isAllSelected() {
        const numSelected = this.selection.selected.length;
        const numRows = this.dataSource.data.length;
        return numSelected === numRows;
      }

      // Expandable Row
      isExpansionDetailRow(i: number, row: Object) {
        return row.hasOwnProperty('detailRow');
      }

      getTerminals() {
        this.cs.getTerminals().subscribe(
          (response) => {
            this.success = response.success;
            this.message = response.msg;
            if (response.success) {
              this.dataSource = new MatTableDataSource(response.data);

              this.dataSource.sort  = this.sort;
              console.log(this.dataSource);

            }

            setTimeout(function () {
              this.message = "";
            }.bind(this), 2000);
          },
          (error) => {
            this.success = error.success;
            this.message = "Cannot get terminals" + error.message;
          }
        );
      }

      ngOnInit() { }

}

マットテーブルのdataSourceであるターミナルは、ネストされたオブジェクトの配列です。serialKeyは文字列です。

これが私のcomponent.htmlファイルのコードスニペットです。serialKey列にmat-sort-headerを追加しました。

  <mat-table class="list-table" [dataSource]="dataSource" matSort matSortActive="serialKey" matSortDirection="asc">

    <ng-container matColumnDef="serialKey">
      <mat-header-cell mat-sort-header class="align-center" *matHeaderCellDef>Serial Key</mat-header-cell>
      <mat-cell class="align-center" *matCellDef="let element">{{element.serial_num}}
      </mat-cell>
    </ng-container>

    </mat-row>

  </mat-table>

誰かが私がここで欠けているものを教えてくれて、テーブルを並べ替えることができれば素晴らしいでしょう。