我试图在Angular中将一个列从父组件传递给子组件，但我遇到了列排序的问题。下面是我的代码：

父组件

<table-sorting-example matSort>
  <ng-container matColumnDef="another">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Another</th>
    <td mat-cell *matCellDef="let element">{{element.another}}</td>
  </ng-container>
</table-sorting-example>

子组件

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Position</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Symbol</th>
    <td mat-cell *matCellDef="let element">{{element.symbol}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

子组件TS文件

import {
  AfterViewInit,
  Component,
  ContentChildren,
  QueryList,
  ViewChild,
} from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import {
  MatColumnDef,
  MatTable,
  MatTableDataSource,
} from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  another: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', another: 'A' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', another: 'B' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', another: 'C' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', another: 'D' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', another: 'E' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', another: 'F' },
];
/**
 * @title Table with sorting
 */
@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements AfterViewInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatTable) myTable: MatTable<PeriodicElement>;
  @ViewChild(MatSort) sort: MatSort;
  @ContentChildren(MatColumnDef) private customCols: QueryList<MatColumnDef>;

  constructor() {}

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    for (let col of this.customCols) {
      this.myTable.addColumnDef(col);
      this.displayedColumns.push(col.name);
    }
  }
}

如您所见，我在父组件和子组件上都使用了matSort。然而，在“另一个”列上排序似乎不起作用。其他列按预期排序。
我已经查看了Angular文档和其他在线资源，但我找不到解决这个问题的方法。有人能帮助我理解为什么在“另一个”列上的排序不起作用，以及如何修复它吗？
你可以在stackblitz上找到完整的代码