Angular Material 2 DataTable Sắp xếp với các đối tượng lồng nhau

Tôi có một DataTable Angular Material 2 bình thường với các tiêu đề sắp xếp. Tất cả các loại tiêu đề đều hoạt động tốt. Ngoại trừ cái có đối tượng là giá trị. Những thứ này không sắp xếp gì cả.

Ví dụ:

 <!-- 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>

lưu ý element.project.name

Đây là cấu hình displayColumn:

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

Thay đổi 'project.name'thành 'project'không hoạt động cũng không"project['name']"

Tôi đang thiếu gì? Điều này thậm chí có thể?

Đây là một Stackblitz: Angular Material2 DataTable sắp xếp các đối tượng

Chỉnh sửa: Cảm ơn tất cả các câu trả lời của bạn. Tôi đã làm cho nó hoạt động với dữ liệu động. Vì vậy, tôi không phải thêm câu lệnh switch cho mọi thuộc tính lồng nhau mới.

Đây là giải pháp của tôi: (Tạo một DataSource mới mở rộng MatTableDataSource là không cần thiết)

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();
  }
}

Thật khó để tìm thấy tài liệu về điều này, nhưng nó có thể thực hiện được bằng cách sử dụng sortingDataAccessorvà một câu lệnh switch. Ví dụ:

@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;
}

Bạn có thể viết một hàm trong thành phần để lấy thuộc tính sâu từ đối tượng. Sau đó sử dụng nó dataSource.sortingDataAccessornhư dưới đây

getProperty = (obj, path) => (
  path.split('.').reduce((o, p) => o && o[p], obj)
)

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (obj, property) => this.getProperty(obj, property);
  this.dataSource.sort = sort;
}

columnDefs = [
  {name: 'project.name', title: 'Project Name'},
  {name: 'position', title: 'Position'},
  {name: 'name', title: 'Name'},
  {name: 'test', title: 'Test'},
  {name: 'symbol', title: 'Symbol'}
];

Và trong html

<ng-container *ngFor="let col of columnDefs" [matColumnDef]="col.name">
      <mat-header-cell *matHeaderCellDef>{{ col.title }}</mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{ getProperty(row, col.name) }}
      </mat-cell>
  </ng-container>

Câu trả lời như đã cho thậm chí có thể được rút ngắn, không cần chuyển đổi, miễn là bạn sử dụng ký hiệu dấu chấm cho các trường.

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);

  this.dataSource.sortingDataAccessor = (item, property) => {
     if (property.includes('.')) return property.split('.').reduce((o,i)=>o[i], item)
     return item[property];
  };

  this.dataSource.sort = sort;
}

Tôi thích @Hieu_Nguyen giải pháp. Tôi sẽ chỉ thêm rằng nếu bạn sử dụng lodash trong dự án của bạn như tôi làm thì giải pháp chuyển thành điều này:

import * as _ from 'lodash';

this.dataSource.sortingDataAccessor = _.get; 

Không cần phải phát minh lại quyền truy cập thuộc tính sâu.

Tôi sử dụng một phương pháp chung cho phép bạn sử dụng đường dẫn dot.seperated.path với mat-sort-headerhoặc matColumnDef. Điều này không thành công khi trả về không xác định một cách âm thầm nếu nó không thể tìm thấy thuộc tính được chỉ định bởi đường dẫn.

function pathDataAccessor(item: any, path: string): any {
  return path.split('.')
    .reduce((accumulator: any, key: string) => {
      return accumulator ? accumulator[key] : undefined;
    }, item);
}

Bạn chỉ cần đặt bộ truy cập dữ liệu

this.dataSource.sortingDataAccessor = pathDataAccessor;

Tôi đã tùy chỉnh cho nhiều cấp độ đối tượng lồng nhau.

this.dataSource.sortingDataAccessor =
  (data: any, sortHeaderId: string): string | number => {
    let value = null;
    if (sortHeaderId.includes('.')) {
      const ids = sortHeaderId.split('.');
      value = data;
      ids.forEach(function (x) {
        value = value? value[x]: null;
      });
    } else {
      value = data[sortHeaderId];
    }
    return _isNumberValue(value) ? Number(value) : value;
  };

Một phương án khác, mà không ai ném ra đây, hãy san bằng cột trước ...

yourData.map((d) => 
   d.flattenedName = d.project && d.project.name ? 
                     d.project.name : 
                     'Not Specified');

this.dataSource = new MatTableDataSource(yourData);

Chỉ là một sự thay thế khác, ưu và nhược điểm cho từng loại!

Chỉ cần thêm cái này vào nguồn dữ liệu của bạn và bạn sẽ có thể truy cập vào đối tượng lồng nhau

this.dataSource.sortingDataAccessor = (item, property) => {
    // Split '.' to allow accessing property of nested object
    if (property.includes('.')) {
        const accessor = property.split('.');
        let value: any = item;
        accessor.forEach((a) => {
            value = value[a];
        });
        return value;
    }
    // Access as normal
    return item[property];
};

Nó đang cố gắng sắp xếp theo phần tử ['project.name']. Rõ ràng phần tử không có thuộc tính như vậy.

Sẽ dễ dàng tạo một nguồn dữ liệu tùy chỉnh mở rộng MatTableDatasource và hỗ trợ sắp xếp theo các thuộc tính đối tượng lồng nhau. Xem các ví dụ trong tài liệu material.angular.io về cách sử dụng nguồn tùy chỉnh.

Tôi đã gặp vấn đề tương tự, bằng cách thử nghiệm đề xuất đầu tiên, tôi gặp một số lỗi, tôi có thể sửa nó bằng cách thêm "switch (thuộc tính)"

this.dataSource.sortingDataAccessor =(item, property) => {
    switch (property) {
    case 'project.name': return item.project.name;

    default: return item[property];
    }
  };

Sử dụng MatTableDataSource Kiểm tra giải pháp vấn đề MatSort hoàn chỉnh

trong HTML

    <ng-container matColumnDef="createdDate" @bounceInLeft>
      <th mat-header-cell *matHeaderCellDef mat-sort-header class="date"> Created date
      </th>
          <td mat-cell *matCellDef="let element" class="date"> {{element.createdDate
           | date :'mediumDate'}} </td>
   </ng-container>

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

@ViewChild(MatSort, { static: true }) 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;
}