Как фильтровать по строкам даты (вчера, сегодня, в этом месяце, в прошлом месяце) в Angular

Question

Я построил код фильтрации длинным или традиционным способом с , если еще , мне нужно сделать это заранее с помощью метода JavaScript (например, фильтра, отображения, уменьшения)

home.html

<div class="row">
  <div class="col text-right">
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="filterByDate" ngbDropdownToggle>Filter By {{ generalValue }}</button>
      <ul aria-labelledby="filterByDate" ngbDropdownMenu class="date-filter">
        <li><a (click)="filterByDate('today')">Today</a></li>
        <li><a (click)="filterByDate('yesterday')">Yesterday</a></li>
        <li><a (click)="filterByDate('sevenDays')">Last 7 Days</a></li>
        <li><a (click)="filterByDate('thirtyDays')">Last 30 Days</a></li>
        <li><a (click)="filterByDate('lastMonth')">Last Month</a></li>
        <li><a (click)="filterByDate('custom')">Custom Range</a></li>
      </ul>
    </div>
  </div>
</div>

home.ts

filterByDate(filterRequest: any) {
    this.isCustomDate = false;
    if (filterRequest === 'today') {
      this.generalValue = 'Today';
      this.requestDate.fromDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US');  // "2019-03-26",
      this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
    }
    if (filterRequest === 'yesterday') {
      this.generalValue = 'Yesterday';
      let newdate = new Date();
      newdate.setDate(newdate.getDate() - 1);
      this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US');  // "2019-03-26",
      this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
    }
    if (filterRequest === 'sevenDays') {
      this.generalValue = 'This Week';
      let newdate = new Date();
      newdate.setDate(newdate.getDate() + 7);
      this.requestDate.fromDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US');  // "2019-03-26",
      this.requestDate.toDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
    }
    if (filterRequest === 'thirtyDays') {
      this.generalValue = 'This Month';
      this.topcustomerValue = 'This Month';
      this.estimatedValue = 'This Month';
      let newdate = new Date();
      newdate.setDate(newdate.getDate() - 30);
      this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US');  // "2019-03-26",
      this.requestDate.toDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
    }
    if (filterRequest === 'lastMonth') {
      this.generalValue = 'Last Month';
      this.topcustomerValue = 'Last Month';
      let thisMonth = new Date();
      thisMonth.setDate(thisMonth.getDate() - 30);
      let newdate = new Date();
      newdate.setDate(newdate.getDate() - 60);
      this.requestDate.fromDate = formatDate(newdate, 'yyyy-MM-dd', 'en-US');  // "2019-03-26",
      this.requestDate.toDate = formatDate(thisMonth, 'yyyy-MM-dd', 'en-US'); // "2019-03-28",
    }
    if (filterRequest === 'nextYear') {
      this.estimatedValue = 'Next Year';
    }
    if (filterRequest === 'custom') {
      this.generalValue = 'Custom';
      this.topcustomerValue = 'Custom';
      this.isCustomDate = true;
      console.log('custom');
    }
    console.log(this.requestDate);
}

этот код работает отлично, но он слишком длинный. Мне нужно сделать это кратким. поэтому я хочу кратчайший путь, пожалуйста, предложите. Пользовательский интерфейс здесь Проверить URL для пользовательского интерфейса

Answer 1

Что бы я сделал, создайте все определения дат в машинописи и просто зациклите их:

today = new Date();
dateFilters = [{
  from: today,
  to: today.getDate() - 30,
  label: 'Last Month'
}, ...
]

, затем в шаблоне:

<li *ngFor="let dateFilter of dateFilters"><a (click)="filterByDate(dateFilter)">{{dateFilter.label}}</a></li>

Тогда ваш filterByDateфункция будет сокращена до 2 строк кода:

this.requestDate.fromDate = dateFilter.from
this.requestDate.toDate = dateFilter.to