0

我有一组 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>

4

1 回答 1

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函数本身，角度团队解释了为什么 https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

编辑：这是一个选择，您有一个限制列表和一个在您选择某些内容时触发的事件。使用此事件设置过滤活动的新值。

<select (change)="onLimitChange($event)">
   <option *ngFor="let limit of limits" [value]="limit.value">
      {{limit.name}}
   </option>
</select>
于 2016-08-11T10:33:06.700 回答