Angular Material数据表列按日期范围排序 [英] Angular Material data table column sort by date range

问题描述

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

How to sort a date column based on the date range? Angular material data table. I am working a project now facing a problem on how to date column sort data based on the date range fromDate and toDate using with filterPredicate or any other option in mat-table.

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

The date column will be shown in between date range. Please refer screenshot and look at the project in stackblitz here

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

If I selected 1 Jan 2019 to 31 Dec 2020 the data will be shown all the between date results

推荐答案

TL; DR:您不仅要排序，还要过滤表. 考虑到您使用的是角形材料，这些是角形材料中单独的问题.您将必须首先提供过滤组件，并使用该数据来实现手动(手动)的filterPredicate函数.

You want to not only sorting but also filtering your table. These are separated concerns in angular material, considering you are using angular material. You will have to provide the filtering components first and use that data to implement a filterPredicate function manually, yes manually.

过滤:

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组件，但是该组件为您提供了现成的功能.请参阅 https://material.angular.io/components/table/overview#sorting 有关如何正确使用MatSort组件的信息:

Sorting functions are also available for your material.table component, but this component comes out-of-the-box for you. Refer to https://material.angular.io/components/table/overview#sorting on how to use the MatSort component properly:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
...

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

then, in your .ts component, you will refer to the matSort as:

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

如果您想完成故事并需要阅读一些书，以了解如何使材料组件适合您的情况，则需要完成几个步骤.我建议您在这里 https://material.angular.io/components/开始表格/概述#sorting

You need to complete several steps if you want to complete the story and a lettle of reading to understand how to adapt the material components to your case. I suggest you to start your jorney here https://material.angular.io/components/table/overview#sorting

这篇关于Angular Material数据表列按日期范围排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！