如何使* ngFor从角度2中的日期中过滤出重复的月份和年份? [英] How to make *ngFor filter out duplicate month and year from date in angular 2?

问题描述

我有一个包含日期的JSON数组对象.我想从日期开始显示唯一的Month和Year(忽略日期).请找到我的JSON对象，如下所示:

I have JSON array object which contains dates. I want to get displayed unique Month and Year(ignore day)from date. Please find my JSON object as below:

    {
"records"[
    {  
        "id":"833599",
        "date":1507624517000,
     },
     {  
        "id":"828140",
        "date":1506346215000,
     },
     {  
        "id":"817349",
        "date":1504852602000,
     },
     {  
        "id":"817347",
        "date":1504851799000,
     },
     {  
        "id":"817346",
        "date":1504851689000,
     },
     {  
        "id":"811693",
        "date":1504086405000,
     },
     {  
        "id":"721986",
        "date":1501140629000,
     },
     {  
        "id":"673227",
        "date":1499435543000,
     },
     {  
        "id":"673196",
        "date":1499433640000,
     },
     {  
        "id":"673190",
        "date":1499433410000,
     },
     {  
        "id":"673188",
        "date":1499433170000,
     },
     {  
        "id":"673171",
        "date":1499432516000,
     },
     {  
        "id":"672075",
        "date":1499336767000,
     },
     {  
        "id":"642516",
        "date":1498122509000,
     },
     {  
        "id":"632547",
        "date":1497350369000,
     },
     {  
        "id":"632546",
        "date":1497350336000,

     },
     {  
        "id":"632545",
        "date":1497350257000,

     },
     {  
        "id":"632543",
        "date":1497350221000,

     },
     {  
        "id":"631750",
        "date":1497256103000,
     },
     {  
        "id":"624957",
        "date":1496820632000, 
     },
     {  
        "id":"621103",
        "date":1496237026000,
     },
     {  
        "id":"620648",
        "date":1496220870000,
     },
     {  
        "id":"613655",
        "date":1495813509000,
     },
     {  
        "id":"610014",
        "date":1495617958000,
     },
     {  
        "id":"609984",
        "date":1495601967000,
     },
     {  
        "id":"603345",
        "date":1495188742000,
     },
     {  
        "id":"596499",
        "date":1494932889000,
     },
     {  
        "id":"596459",
        "date":1494914330000,
     },
     {  
        "id":"587822",
        "date":1494510858000,
     }
    ]
}

我想要得到如下输出:

October 2017
September 2017
August 2017
July 2017
June 2017
May 2017

我尝试使用

<div *ngFor="let record of records" class="month-row">
        <div class="month-name">{{ record.date | date: 'MMMM yyyy'}}</div>
</div>

但低于结果:

October 2017
September 2017
September 2017
September 2017
September 2017
August 2017
August 2017
July 2017
July 2017
July 2017
June 2017
May 2017
May 2017
May 2017
May 2017

请帮助您从该日期起获取唯一的月份和年份，这样月份和年份就不能重复?

Could you please help to get unique Month and year from this date so month and year shouldn't be duplicate?

此外，请注意，如果年份不同，则可以重复月份.

Also, Please note if year is different then month can be repeat.

推荐答案

您需要创建一个管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterMonthYear' })
export class UniqueMonthYearPipe implements PipeTransform {
  transform(dates) {

    var updated_dates = dates.map(date => {
      var d = new Date(date.date);
      return (d.getMonth()+1) + '/' + d.getFullYear(); 
    });

    return Array.from(new Set(updated_dates));
  }
}

并像这样使用它:

<div *ngFor="let record of (records.records | filterMonthYear)">
  {{record}}
</div>

---

这是工作示例的链接:

---

Here is the link to working example :

https://stackblitz.com/edit/angular-filter-pipe

这篇关于如何使* ngFor从角度2中的日期中过滤出重复的月份和年份?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！