javascript - 如何在 Angular5 或 Javascript 中以日期方式显示数据？

Question

我试图在我的 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",
}
]

请建议我如何做到这一点。谢谢

标签： javascriptangular

Answer 1

演示

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>