如何在Angular5或Javascript中按日期显示数据?

时间:2018-08-16 07:46:35

标签: javascript angular

我试图在我的angular 5应用程序中按日期显示数据。 我有uniq日期列表数组和数据数组。我想要以下数据

19/01/2018 

海得拉巴, 钦奈

20/01/2018

金奈, 德里

21/01/2018

海得拉巴, 孟买

  

我有这样的数组

dates_list = [19/01/2018, 20/01/2018, 21/01/2018];
data_list = [{
name: "Hyderabad"
date: "19/01/2018",
}, 
{
name: "Chennai"
date: "19/01/2018",
}, 
{
name: "Chennai"
date: "20/01/2018",
},
{
name: "Delhi"
date: "20/01/2018",
},
{
name: "Mumbai"
date: "21/01/2018",
},
{
name: "Hyderabad"
date: "19/01/2018",
}
]

请建议我该怎么做。谢谢

1 个答案:

答案 0 :(得分:1)

DEMO

TS:

filterdArray: Array<any> = [];

  dates_list = ['19/01/2018', '20/01/2018', '21/01/2018'];
  data_list = [{
    name: "Hyderabad",
    date: "19/01/2018",
  },
  {
    name: "Chennai",
    date: "19/01/2018",
  },
  {
    name: "Chennai",
    date: "20/01/2018",
  },
  {
    name: "Delhi",
    date: "20/01/2018",
  },
  {
    name: "Mumbai",
    date: "21/01/2018",
  },
  {
    name: "Hyderabad",
    date: "19/01/2018",
  }
  ];

  constructor() {
    this.getValiDates();
  }


  getValiDates() {
    this.dates_list.forEach(el => {
      this.filterdArray.push({ key: el, data: this.data_list.filter(data => data.date == el) });
    })
  }

HTML:

<div *ngFor="let d of filterdArray; let i = index">
    {{d.key}}
    <div *ngFor="let data of d.data">
        {{data | json}}
    </div>
</div>