时间戳

首页 > 解决方案 > Angular Material MatSort 和sortingDataAccessor 如何协同工作？

angular - Angular Material MatSort 和sortingDataAccessor 如何协同工作？

问题描述

我正在使用 Angular 材料表。我正在尝试实现自定义排序行为。

我已经在使用这样的sortingDataAccessor：

export class BillsComponent implements OnInit, OnDestroy {
  @ViewChild(MatSort, { static: true }) matSort: MatSort;
  data;

  displayedColumns = [
    'alreadyExported',
    'date',
    'invoiceNumber'
  ];

  ngOnInit() {
    this.loadData();
  }

  loadData() {
      ...
      .subscribe(data => {
        // Set new accessor
        this.data = new MatTableDataSource(data);
        this.data.sortingDataAccessor = (item, header) => {
          switch (header) {
            case 'date': return new Date(item.rechnungsdatum);
            case 'alreadyExported': return (item.export.exportFuerSteuerberater === null ? true : false);
            default: return item[header];
          }
        };
        this.data.sort = this.matSort;
      });
  }

  sortEvent() {
    this.data.sortingDataAccessor = (data, header) => data[header];
    this.data.sort = this.matSort;
  }
}

但是，我现在对另一列有问题。它是一个包含带有数字和文本的字符串的列。

表格列中的数据如下所示：

但应该是这样的：

我想添加一个自定义排序行为，就像在这篇文章中解释的那样，但我不明白 sort 和 sortDataAccessor 是如何一起工作的。我实际上根本不明白它们之间的区别。

谁能向我解释差异以及如何应用这种排序行为？

标签： angularsortingangular-material

解决方案

您可以在排序数据访问器中生成并返回可比较的值。在您的情况下，它可能是：

  • BE-00001
  • BE-00011
  • BE-00131

就我而言，我使用以下代码：

    private sortingDataAccessor = (item, property) => {
        switch (property) {
            case 'address': return this.getComparableAddress(item.address);
            default: return item[property] || '';
        }
    }

    private getComparableAddress(sourceAddress: string): string {
        let address = '';
        const blockLength = 3;

        const splittedAddress = sourceAddress.split(' ');
        for (const item of splittedAddress) {
            for (let i = 0; i < blockLength - item.length; i++) {
                address = address + '0';
            }
            address = address + item;
        }

        return address;
    }

推荐阅读