Question

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

日期列将显示在日期范围之间。请参考屏幕截图，并以stackblitz here的形式查看项目

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

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

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

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

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

Answer 2

为了获得预期的结果，您需要更改dataSource类型。另外，您还需要一种方法来根据用户的日期范围选择来重建项目数组。

您的xxx.component.ts应该看起来像这样。

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { DatePipe } from '@angular/common';
import {FormControl, FormGroup} from '@angular/forms';
import * as moment from 'moment';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  DOB: Date;
  created: Date;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, DOB: new Date(2016, 11, 24), created: new Date(2015, 15, 24) },
  { position: 2, name: 'Helium', weight: 4.0026, DOB: new Date(2018, 18, 24), created: new Date(2018, 11, 24) },
  { position: 3, name: 'Lithium', weight: 6.941, DOB: new Date(1993, 6, 12), created: new Date(1999, 12, 15) },
  { position: 4, name: 'Beryllium', weight: 9.0122, DOB: new Date(2001, 7, 6), created: new Date(2011, 10, 6) },
  { position: 5, name: 'Boron', weight: 10.811, DOB: new Date(2020, 5, 9), created: new Date(2020, 5, 9) },
  { position: 6, name: 'Carbon', weight: 12.0107, DOB: new Date(2008, 7, 14), created: new Date(2008, 7, 14) },
  { position: 7, name: 'Nitrogen', weight: 14.0067, DOB: new Date(1998, 11, 18), created: new Date(1998, 11, 18) },
  { position: 8, name: 'Oxygen', weight: 15.9994, DOB: new Date(2002, 2, 24), created: new Date(2002, 2, 24) },
  { position: 9, name: 'Fluorine', weight: 18.9984, DOB: new Date(2006, 4, 29), created: new Date(2006, 4, 29) },
  { position: 10, name: 'Neon', weight: 20.1797, DOB: new Date(2040, 5, 30), created: new Date(2040, 5, 30) },
];

/**
 * @title Table with filtering
 */
@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'DOB', 'founded'];
  dataSource = ELEMENT_DATA;
  pipe: DatePipe;

filterForm = new FormGroup({
    fromDate: new FormControl(),
    toDate: new FormControl(),
});

get fromDate() { return this.filterForm.get('fromDate'); }
get toDate() { return this.filterForm.get('toDate'); }

  constructor() {
  }

  getDateRange(value) {
    // getting date from calendar
    const fromDate = value.fromDate
    const toDate = value.toDate
    const tempData = <any>this.dataSource;
    let selectedItems: PeriodicElement[] = [];
    if(fromDate !== '' && toDate !== '') {
              tempData.forEach((item, index) => {
            if (item.DOB >= fromDate && item.DOB <= toDate) {
                selectedItems.push(item);
            }
        });

        this.dataSource = selectedItems;
    }
  }


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

Answer 3

您可以使用过滤器功能。

getDateRange(value) {
    this.dataSource.data = ELEMENT_DATA;
    const fromDate = value.fromDate
    const toDate = value.toDate
    this.dataSource.data = this.dataSource.data.filter(e=>e.DOB > fromDate && e.DOB < toDate ) ;
  }

filter（）方法创建一个具有所有通过元素的新数组通过提供的功能实现的测试。

More information about filter function

Stackblitz example based on your example.

Answer 4

如果您想应用自定义行为进行过滤和排序，那么您可以应用以下内容：

自定义过滤示例（在您的构造函数中）：

this.dataSourceUPs.filterPredicate = (data: UPs, filter: string) => {
  filter = filter.trim().toLowerCase();
  return this.contains(data.nombreUP, filter) || this.contains(data.ciudad, filter) || this.contains(Number(data.fechaInicio.split("T")[0].split("-")[2]), filter);
}

自定义排序示例：

compare(a: number | string, b: number | string, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
sortDataUPs(sort: Sort) {
    const data = this.dataSourceUPs.data.slice();
    if (!sort.active || sort.direction === '') {
      this.dataSourceUPs.data = data;
      return;
    }

    this.dataSourceUPs.data = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'periodo': return this.compare(a.periodo, b.periodo, isAsc);
        case 'nombreUP': return this.compare(a.nombreUP, b.nombreUP, isAsc);
        case 'ciudad': return this.compare(a.ciudad, b.ciudad, isAsc);
        case 'programa': return this.compare(a.nombreEdicion + '-' + a.nombrePrograma, b.nombreEdicion + '-' + b.nombrePrograma, isAsc);
        default: return 0;
      }
    });
  }

大小写是您放入 html ng-container 中的 matColumnDef 的值，也就是您放入 displayColumns 数组的列名。剩下要做的就是像这样对你的表应用绑定：

<table mat-table [dataSource]="dataSourceUPs" class="mat-elevation-z8" style="width: 100%;" matSort (matSortChange)="sortDataUPs($event)">

您可以注意到案例“programa”是自定义的。您很可能需要进行正确的导入语句，例如 Sort 类型。

角材料数据表列按日期范围排序

4 个答案: