angular-material - matSort を使用して mat-table の列を並べ替えるにはどうすればよいですか?

Question

mat-table でソートを実装しようとしていますが、まったく機能しません。エラーは発生しません。

これが私のコードです。

これは私の 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() { }

}

マット テーブルのデータ ソースである Terminals は、ネストされたオブジェクトの配列です。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>

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