angular - *ngFor 在某些值 [date] 更改时添加某些 div [date] 元素

Question

我有交易 list ，我正在使用 *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打印日期？

Answer 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 文件中的数据分组并根据模板中的数据显示数据。