Блог

Я хочу применить фильтр для всего поиска и фильтр диапазона дат для таблицы данных материалов в angular 7. Я знаю, что предикат filter и filter нельзя использовать вместе, но, пожалуйста, скажите мне, есть ли альтернатива.

Я уже реализовал динамический фильтр поиска по всей таблице, и теперь я хотел отфильтровать таблицу источника данных с диапазоном дат. Итак, я реализовал предикат фильтра с этим. Но теперь весь мой фильтр поиска не работает.

 import { Component, OnInit, ViewChild } from '@angular/core';
import * as Chartist from 'chartist';
import { ActivatedRoute } from '@angular/router';
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-seller',
  templateUrl: './seller.component.html',
  styleUrls: ['./seller.component.css']
})

export class SellerComponent implements OnInit {

  public state_name: any;
  displayedColumns: string[] = ['position', 'id', 'date', 'name', 'address', 'city', 'state', 'amount'];
// tslint:disable-next-line: no-use-before-declare
  dataSource = new MatTableDataSource(ELEMENT_DATA);

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

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

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor( private route: ActivatedRoute) {
    this.dataSource.filterPredicate = (data) => {
      if (this.fromDate amp;amp; this.toDate) {
        return new Date(data.date).getTime() >= this.fromDate.getTime() amp;amp; new Date(data.date).getTime() <= this.toDate.getTime();
      }
      return true;
    }
  }
    startAnimationForLineChart(chart: any) {
      let seq: any, delays: any, durations: any;
      seq = 0;
      delays = 80;
      durations = 500;

      chart.on('draw', function(data: any) {
        if (data.type === 'line' || data.type === 'area') {
          data.element.animate({
            d: {
              begin: 600,
              dur: 700,
              from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
              to: data.path.clone().stringify(),
              easing: Chartist.Svg.Easing.easeOutQuint
            }
          });
        } else if (data.type === 'point') {
              seq  ;
              data.element.animate({
                opacity: {
                  begin: seq * delays,
                  dur: durations,
                  from: 0,
                  to: 1,
                  easing: 'ease'
                }
              });
          }
      });
    seq = 0;
  };

  ngOnInit() {
    // Initialize the chart
    const dataCompletedTasksChart: any = {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [
          [230, 750, 450, 300, 280, 240, 200, 190]
      ]
    };
    const optionsCompletedTasksChart: any = {
        lineSmooth: Chartist.Interpolation.cardinal({
            tension: 0
        }),
        low: 0,
        high: 1000,
        chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
    }
    const completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
    this.startAnimationForLineChart(completedTasksChart);

    // Get state name from url
    const name = this.route.snapshot.paramMap.get('state');
    this.state_name = name;

    // Initialize the pagination
    this.dataSource.paginator = this.paginator;
    // Initialize the sorting
    this.dataSource.sort = this.sort;
  }

  // // Gets the total amount of all transactions
  // getTotalAmount() {
  // // tslint:disable-next-line: no-use-before-declare
  //   return ELEMENT_DATA.map(t => t.amount).reduce((acc, value) => acc   value, 0);
  // }
  // Whole table search filter
  applySearchFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
  // DateRange filter
  applyDateFilter() {
    this.dataSource.filter = ''   Math.random();
  }
}

export interface PeriodicElement {
  position: number;
  id: any;
  date: any;
  name: string;
  address: any;
  city: string;
  state: string;
  amount: any;
}
const ELEMENT_DATA: any[] = [];
for (let i = 1; i <= 100; i  ) {
  const data = {
    position: i,
    id: 'QWERTY'   (i * 2),
    date: '04/'   (i   1)   '/2019',
    name: 'Joshi Chemist',
    address: 'W-980/8, Sainik Farm, New Delhi-110062',
    city: 'New Delhi',
    state: 'DELHI',
    amount: i * 2300
  };
  ELEMENT_DATA.push(data);
}



  

Оба фильтра работают одновременно.