javascript - 如何在 angularjs2 中使用日期过滤数据

Question

我有一组 json 格式的字符串，需要使用日期过滤数据。它就像使用 angular2 过滤所有日期、过去 3 个月和过去 6 个月。
请找到以下结构，我需要使用日期过滤数据。

<ul>
   <li*ngFor="let account of activities">
      {{accont.activityDate | date}} - {{account.activityDescription}}
   </li>
</ul>

我的 Json 数据是:

"activities": [
{
  "activityDate": "2016-07-02",
  "activityDescription": "Data1",
},
{
  "activityDate": "2016-08-23",
  "activityDescription": "Data2",
},
{
  "activityDate": "2016-04-11",
  "activityDescription": "Data3",
}
{
  "activityDate": "2016-04-11",
  "activityDescription": "Data4",
}
{
  "activityDate": "2015-07-21",
  "activityDescription": "Data5",
}
];

"activities": [{
  "activityDate": "2016-07-02",
  "activityDescription": "Data1",
}, {
  "activityDate": "2016-08-23",
  "activityDescription": "Data2",
}, {
  "activityDate": "2016-04-11",
  "activityDescription": "Data3",
} {
  "activityDate": "2016-04-11",
  "activityDescription": "Data4",
} {
  "activityDate": "2015-07-21",
  "activityDescription": "Data5",
}];

<ul>
  <li *ngFor="let account of activities">
    {{accont.activityDate | date}} - {{account.activityDescription}}
  </li>
</ul>

Answer 1

日期管道可帮助您格式化日期，而不是过滤它。

您应该根据您的标准传递一组经过过滤的事件。 因此，写如下:

<ul>
  <li*ngFor="let account of filteredActivities">
     {{accont.activityDate | date}} - {{account.activityDescription}}
  </li>
</ul>

在你的组件中

private filteredActivities;
private dateLimit = new Date().getTime() - (30 * 24 * 60 * 60 * 1000); // 30 days ago ... define as and where you wish

filterActivities() {
   return this.activities.filter(activity => {
      let date:Date = new Date(activity.activityDate);
      return date.getTime() > dateLimitInMS;
   });
}

您可以在 ngInit 中以及在更改 dateLimit 时调用设置filteredActivities。

不要编写自定义管道，也不要传递filteredActivities函数本身， Angular 团队解释了原因 https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

编辑:这里有一个选择，其中有一个限制列表，并且当您选择某些内容时会触发一个事件。使用此事件来设置filteredActivities的新值。

<select (change)="onLimitChange($event)">
   <option *ngFor="let limit of limits" [value]="limit.value">
      {{limit.name}}
   </option>
</select>