Angular Material 数据表列按日期范围排序

Question

如何根据日期范围对日期列进行排序？角材料数据表。我正在处理一个项目，现在面临一个问题，即如何使用 filterPredicate 或 mat-table 中的任何其他选项根据日期范围 fromDate 和 toDate 对列排序数据进行日期排序。

日期列将显示在日期范围之间。请参考屏幕截图并在此处查看stackblitz中的项目

https://stackblitz.com/edit/angular-pkkvbd-cdtxwz-date-range-filter?embed=1&file=app/table-filtering-example.ts

如果我选择2019年1月1日至2020年12月31日的数据将被显示的所有日期结果之间

Answer 1

TL;DR: https://stackblitz.com/edit/angular-pkkvbd-cdtxwz-date-range-filter-jzlwxr?file=app/table-filtering-example.ts

您不仅要排序，还要过滤表格。考虑到您使用的是有角材料，这些是有角材料中的独立关注点。您必须首先提供过滤组件并使用该数据手动实现 filterPredicate 函数，是的，手动。

过滤：

export class TableFilteringExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) {
    this.dataSource.filterPredicate = filterPeriod;
  }

  filterPeriod(data: T, filter: string) {
    return data.referenceDate > startDateFilter.value() && data.referenceDate < endDateFilter.value();
  }
}

排序功能也可用于您的 material.table 组件，但该组件是为您开箱即用的。 关于如何正确使用 MatSort 组件，请参考https://material.angular.io/components/table/overview#sorting：

export class TableFilteringExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) {
    this.dataSource.filterPredicate = filterPeriod;
  }

  filterPeriod(data: T, filter: string) {
    return data.referenceDate > startDateFilter.value() && data.referenceDate < endDateFilter.value();
  }
}

然后，在您的.ts组件中，您将把 matSort 称为：

    @ViewChild(MatSort, {static: true}) sort: MatSort;

如果您想完成故事和阅读文章以了解如何根据您的案例调整材料组件，您需要完成几个步骤。我建议你从这里开始你的旅程https://material.angular.io/components/table/overview#sorting