在html模板中使用ngIf进行Angular6日期时间检查

时间:2018-09-17 09:19:31

标签: html typescript angular6

我正在使用Angular6

下面是带有div的ngfor。此处的api输出会议日期和时间以及状态。通常状态为即将到来。

如果日期时间为2018年9月18日。时间是5.30 Pm。

<div class="col-sm-12" *ngFor="let todayinfo of todaylist  |  paginate: { id: 'todaypage', itemsPerPage: itemperpage, currentPage: page, totalItems: todaytotal}">

<div class="meeting-date-time" title="Date Time" >
              {{todayinfo.meeting_date  | date: 'MMM d, y '}} <br>{{todayinfo.displayTime}}               
              </div>
<div>{{todayinfo.status}} </div>

</div>

在会议时间15分钟之前,即将到来的状态应更改为Join

即9月18日下午5.15,内容需要更改为Join。这里如何检查日期时间检查条件。它显示在循环内。如果有任何点击动作,我们将使用单独的功能进行检查。没有任何事件,如何在此处检查日期时间条件?

现在输出为

Sep 18 2018 5.30 PM   --- Upcoming 
Sep 4 2018  9.00 AM -- Completed
Spe 17 2018 7.15 PM -- Upcoming

这些upcoming需要在相应日期时间的15分钟之前更改为Join

1 个答案:

答案 0 :(得分:0)

有一个简单的解决方案可以实现:

const meetings = [
    {meeting_date: new Date(2018, 8, 17, 11, 44), status: null},
    {meeting_date: new Date(2018, 8, 17, 12, 45), status: null}
];
const today = new Date();

meetings.filter(meeting => (meeting.meeting_date.getTime() - today.getTime()) <= 900000).forEach(meeting => meeting.status = 'Join');

它将检查时差小于或等于900000(15分钟)的会议并将其状态标记为“加入”。