Столбец таблицы данных углового материала сортируется по диапазону дат - PullRequest
Новая
       20

Столбец таблицы данных углового материала сортируется по диапазону дат

1 голос
/ 04 апреля 2019

Как отсортировать столбец даты на основе диапазона дат?Угловая таблица данных материала.Сейчас я работаю над проектом, сталкивающимся с проблемой того, как датировать данные сортировки столбцов на основе диапазона дат fromDate и toDate, используя с filterPredicate или любым другим параметром в mat-table.

Столбец даты будет отображаться междудиапазон дат.Пожалуйста, посмотрите скриншот и посмотрите на проект в stackblitz здесь enter image description here

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

Если я выбрал 1 января 2019 до 31 декабря 2020 года данные будут показаны все результаты между датами

Ответы [ 3 ]

2 голосов
/ 04 апреля 2019

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

0 голосов
/ 04 апреля 2019

Вы можете использовать функцию фильтра. 

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 () создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.

Дополнительная информация о функции фильтра

Пример Stackblitz на основе вашего примера.

0 голосов
/ 04 апреля 2019

Чтобы достичь ожидаемого результата, вам нужно изменить тип 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();
  }
}
...