如何使用angularjs2中的日期过滤数据

I have set of json formated string and need to filter data using date. It is like filter All dates, Last 3 months and Last 6 months using angular2.
Please find the below structure and I need filtered data using date.

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

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

My Json data is:

我的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>

1 个解决方案

#1

the date pipe helps you to format date, not to filter it.

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

you should pass a set of filtered activities according to your criteria. therefore, write something like:

您应该根据您的标准传递一组过滤的活动。因此，写下类似的东西：

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

and in your component

并在您的组件中

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

you could call set the filteredActivities in ngInit and on change of the dateLimit.

你可以调用在ngInit中设置filteredActivities并更改dateLimit。

dont write a custom pipe and dont pass the filteredActivities function itself, the angular team explains why https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

不写自定义管道并且不通过filteredActivities函数本身，角度团队解释了为什么https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

edit: here is a select where you have a list of limits and an event fired when you select something.. use this event to set the new value of filteredActivities.

编辑：这里是一个选择，你有一个限制列表和一个事件在你选择的东西时触发..使用此事件来设置filteredActivities的新值。

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

#1