[解決済み] Angular Material 2 ネストされたオブジェクトによるデータテーブルのソート

質問

通常のAngular Material 2のDataTableで、ソートヘッダーがあります。 すべてのソートヘッダーは問題なく動作します。値としてオブジェクトを持つものを除いて。 これらは全くソートされません。

例えば

 <!-- Project Column - This should sort!-->
    <ng-container matColumnDef="project.name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell>
    </ng-container>

は element.project.name

これがdisplayColumnの設定です。

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

変更 'project.name' を 'project' は機能しませんし "project['name']"

何が足りないのでしょうか？こんなことが可能なのでしょうか？

ここにスタックブリッツがあります。 Angular Material2 DataTableのソートオブジェクト

編集します。 たくさんのご回答ありがとうございます。 すでに動的データで動作させています。なので、新しいネストされたプロパティごとにswitch文を追加する必要はないですね。

以下は私の解決策です。(MatTableDataSourceを継承した新しいデータソースを作成することは必要ありません)

export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {

  sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
    (data: WorkingHours, sortHeaderId: string): string | number => {
      let value = null;
      if (sortHeaderId.indexOf('.') !== -1) {
        const ids = sortHeaderId.split('.');
        value = data[ids[0]][ids[1]];
      } else {
        value = data[sortHeaderId];
      }
      return _isNumberValue(value) ? Number(value) : value;
    }

  constructor() {
    super();
  }
}

どのように解決するのですか？

これに関するドキュメントを見つけるのは難しかったのですが、この方法は sortingDataAccessor とswitchステートメントを使うことで可能です。例えば

@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      case 'project.name': return item.project.name;
      default: return item[property];
    }
  };
  this.dataSource.sort = sort;
}