时间戳

首页 > 解决方案 > *ngFor 在特定值 [日期] 更改时添加特定 div [日期] 元素

angular - *ngFor 在特定值 [日期] 更改时添加特定 div [日期] 元素

问题描述

我有交易清单，我正在使用 打印它们*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并打印日期？

标签： angular

解决方案

您可以通过与之前的值和检查索引进行比较来做到这一点。

<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>

堆栈闪电战

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

推荐阅读