Angular 角度材质数据表列按日期范围排序

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

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

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

TL；博士：

您不仅需要排序，还需要筛选表。 考虑到您正在使用角材质，这些是角材质中的独立关注点。您必须首先提供过滤组件，并使用该数据手动实现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();
  }
}

---

如果你想完成这个故事，你需要完成几个步骤，并通过少量阅读来理解如何使材料成分适应你的案例。我建议您在这里开始jorney

为了达到预期的结果，您需要更改

数据源

类型。此外，您还需要一种方法根据用户的日期范围选择重建项目数组

您的

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

从'@angular/core'导入{Component}；
从“@angular/material”导入{MatTableDataSource}；
从“@angular/common”导入{DatePipe}；
从'@angular/forms'导入{FormControl，FormGroup}；
从“时刻”导入*作为时刻；
导出接口周期元素{
名称：字符串；
职位：编号；
重量：个数；
DOB：日期；
创建日期：日期；
}
常量元素_数据：PeriodiceElement[]=[
{位置：1，名称：'Hydrogen'，重量：1.0079，出生日期：新日期（2016,11,24），创建日期：新日期（2015,15,24）}，
{位置：2，名称：“氦”，重量：4.0026，出生日期：新日期（2018,18,24），创建日期：新日期（2018,11,24）}，
{位置：3，名称：“锂”，重量：6.941，出生日期：新日期（1993,6,12），创建日期：新日期（1999,12,15）}，
{位置：4，名称：'铍'，重量：9.0122，出生日期：新日期（2001,7,6），创建日期：新日期（2011,10,6）}，
{位置：5，名称：'硼'，重量：10.811，出生日期：新日期（2020,5,9），创建日期：新日期（2020,5,9）}，
{位置：6，名称：'碳'，重量：12.0107，出生日期：新日期（2008,7,14），创建日期：新日期（2008,7,14）}，
{位置：7，名称：“氮”，重量：14.0067，出生日期：新日期（1998,11,18），创建日期：新日期（1998,11,18）}，
{位置：8，名称：“氧气”，重量：15.9994，出生日期：新日期（2002,2,24），创建日期：新日期（2002,2,24）}，
{位置：9，名称：“氟”，重量：18.9984，出生日期：新日期（2006,4,29），创建日期：新日期（2006,4,29）}，
{位置：10，名称：'Neon'，重量：20.1797，出生日期：新日期（2040,5,30），创建日期：新日期（2040,5,30）}，
];
/**
*@title表与筛选
*/
@组成部分({
选择器：“表筛选示例”，
样式URL:['table-filtering-example.css']，
templateUrl:“表筛选示例.html”，
})
导出类TableFilteringExample{
displayedColumns:string[]=['position'，'name'，'weight'，'DOB'，'founded']；
数据源=元素\数据；
管道：DatePipe；
filterForm=新表单组({
fromDate:new FormControl（），
toDate:新建FormControl（），
});
get-fromDate（）{返回this.FilterPerform.get（'fromDate'）；}
get toDate（）{返回this.filtermber.get（'toDate'）；}
构造函数（）{
}
getDateRange（值）{
//从日历中获取日期
const fromDate=value.fromDate
const toDate=value.toDate
const tempData=this.dataSource；
让selectedItems:PeriodiceElement[]=[]；
如果（从日期！=''&&toDate！=''）{
tempData.forEach（（项目，索引）=>{
如果（item.DOB>=fromDate&&item.DOB，则可以使用过滤功能

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

getDateRange（值）{
this.dataSource.data=元素\数据；
const fromDate=value.fromDate
const toDate=value.toDate
this.dataSource.data=this.dataSource.data.filter（e=>e.DOB>fromDate&&e.DOB

filter（）方法使用通过的所有元素创建一个新数组
由提供的函数实现的测试

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


如果要应用自定义行为进行筛选和排序，则可以应用如下内容：

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

自定义筛选示例（在构造函数中）：

自定义排序示例：

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

比较（a:number |字符串，b:number |字符串，isAsc:boolean）{
回报率（a{
常量isAsc=sort.direction=='asc'；
开关（sort.active）{
案例'periodo'：返回这个。比较（a.periodo，b.periodo，isAsc）；
案例“nombreUP”：返回这个。比较（a.nombreUP，b.nombreUP，isAsc）；
案例“ciudad”：返回此。比较（a.ciudad，b.ciudad，isAsc）；
案例“programa”：返回此.compare（a.nombredicon+'-'+a.nombredicon，b.nombredicon+'-'+b.nombredicon，isAsc）；
默认值：返回0；
}
});
}

大小写是您在html ng容器中放入matColumnDef的值，这是您放入displayedColumns数组的列名。
剩下要做的唯一一件事就是像这样对表应用绑定：

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



您可以注意到案例“programa”是定制的。
您很可能需要做出正确的导入语句，例如排序类型。
如何在“this.dataSource.filterPredicate”而不是“thisdataSource.data”中筛选日期范围.嗯，这有点复杂，因为你需要用你自己的逻辑来包装过滤函数。你想让我添加到考试中吗