Материал Угловая таблица не сортирует столбец, который содержит объекты

Question

Я создаю веб-приложение, используя угловой материал, и пытаюсь отобразить таблицу с сортировкой. Сортировка работает на всех, кроме этого столбца. Это единственный столбец, в котором тип переменной не является строкой или числом.

Я уже пытался изменить столбец def на office.name и т. Д., Но безрезультатно.

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

Код компонента:

export class DataTableComponent implements OnInit, OnChanges {
  dataTableColumns: string[] = ['name', 'emailAddress', 'office', 'active'];
  dataSource: MatTableDataSource<Data>;
  data: Data[];
  offices: Office[];
  value: string;
  oldFilterValue: string;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;
  @ViewChild(MatTable) table: MatTable<any>;
  @ViewChild(MatMenuTrigger)
  contextMenu: MatMenuTrigger;

  contextMenuPosition = { x: '0px', y: '0px' };

  constructor(
    private dataService: DataService,
    public dialog: MatDialog,
    private officeService: OfficeService,
    public snackBar: MatSnackBar) {
  }

  ngOnInit() {
    this.getData();
    this.getOffices();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.updateTable();
  }

  getData(): void {
    this.dataService.get().subscribe((res) => {
      setTimeout(() => {
      this.data= res as any[];
      this.updateTable();
    });
  }

  updateTable(): void {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    if (this.value) {
      this.applyFilter(this.value);
    }
  }

  getOffices(): void {
    this.officeService.getOffices().subscribe((res) => {
      this.offices = res;
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Answer 1

Вы можете использовать sortingDataAccessor в вашем источнике данных для сортировки объекта в вашей таблице.

Предполагая, что ваше имя источника данных dataSrouce

@ViewChild(MatSort) sort: MatSort;


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

И в вашем HTMLизменить matColumnDef="office" на matColumnDef="office.name"

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