javascript - 如何在 Angular 中按日期字符串(昨天、今天、本月、上个月)进行过滤

Question

我已经通过if else 构建了长距离或传统方式的过滤代码，我需要使用高级 JavaScript 方法(如 filter、map、reduce)来完成

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

这段代码工作得很好，但是太长了。我需要简明扼要。所以我想要最短的路，请建议。用户界面在这里Check URL for UI

Answer 1

我会做的是，在 typescript 中创建所有日期定义并循环它们:

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