* ng用于在某些值[日期]更改上添加某些div [日期]元素

时间:2019-05-03 04:55:53

标签: angular

我有交易清单,我正在使用*ngFor打印交易,截至目前仅打印时间。

purchaseRecords = [
  {
    "name": "a13bcd",
    "timestamp": "2019-05-03T04:43:17"
  },
  {
    "name": "e34fgh",
    "timestamp": "2019-05-03T04:53:17"
  },
  {
    "name": "e1234b",
    "timestamp": "2019-05-03T05:43:17"
  },
  {
    "name": "y234nk",
    "timestamp": "2019-05-04T04:43:17"
  }
];



<div *ngFor="let purRecord of purchaseRecords">
   <div>{{purRecord.name}} - {{ purRecord.timestamp | date: 'shortTime' }}</div>
</div>

哪些印刷品

a13bcd - '9:43 PM'
e34fgh - '9:53 PM'
e1234b - '10:43 PM'
y234nk - '9:43 PM'

如何获得这样的结果?

03/05/2019 // How to get date here in the for loop
a13bcd - '9:43 PM'
e34fgh - '9:53 PM'
e1234b - '10:43 PM'
04/05/2019
y234nk- '9:43 PM'

日期更改后,如何将当前record.timestamp日期与下一个record.timestamp和打印日期进行比较?

1 个答案:

答案 0 :(得分:1)

您可以通过与之前的值进行比较并检查索引来实现。

<div *ngFor="let purRecord of purchaseRecords;let i=index">
  <div *ngIf=" !i || ( purRecord.timestamp | date: 'shortDate') !== (purchaseRecords[i-1].timestamp | date: 'shortDate' ) ">{{ purRecord.timestamp | date: 'shortDate' }}</div>
   <div>{{purRecord.name}} - {{ purRecord.timestamp | date: 'shortTime' }}</div>
</div>

Stackblitz

或者将ts文件中的数据分组,并根据模板中的数据显示数据。