角度 7 - *ng用于计算并在单个 p 标签中绑定最近 3 天的时间

Question

我想计算并显示过去 3 天的剩余时间 使用角度的单个 P 标签

<p>You have remaining time <span *ngFor="let item of _objAttendancePage.Attendancelist">{{item.remainingTime}}</span>  to complete your working hour. Do you want to still punch out ?|</p>

运行上述代码后，此代码输出如下所示： 您还有剩余时间 00：25：20,00：30：25,00：40：15 分钟来完成您的工作 小时。你还想打出来吗？

I expect if user logout his session before working hrs completed(last 3 days)
Employee Remaining Time List (Attendancelist: array):
1st Day: 00:25:20,
2nd Day: 00:30:25,
3rd Day: 00:40:15,
4th Day: 01:50:15 and so on 

我希望最终输出是：

You have remaining time 95Min to complete your working hour. Do you want 
to still punch out ?

Answer 1

根据我的理解，您希望对"考勤列表"中的所有最小值求和，然后显示最终的总和值。

你应该使用角管来做到这一点。 它会是这样的

<p>You have remaining time 
<span >{{_objAttendancePage.Attendancelist|sum}}</span>  
to complete your working hour. Do you want to still punch out ?|</p>

这里的"|sum"是您需要创建的管道。 请参阅此 https://angular.io/guide/pipes#custom-pipes

Answer 2

我认为你@Vikas很有用。我的解决方案 HTML 代码如下，

<p>I expect if user logout his session before working hrs completed(last 3 days)</p><br />
<br />
<p>Employee Remaining Time List (Attendancelist: array):</p>
<p *ngFor="let time of empRemTimes; index as day">
Day - {{day+1}}: {{time}}<span *ngIf="empRemTimes.length!=day+1">,</span>
<span *ngIf="empRemTimes.length==day+1"> and so on</span>
</p>
<p>You have remaining time {{sumMins}}Min to complete your working hour. Do you want fto still punch out ?</p>

下面的组件代码，

empRemTimes = ['00:01:12', '00:00:45', '00:01:00', '00:00:10'];
sumMins = 90; // SUM the above array value set this variable

对于你的前任：堆叠闪电战

下面的最终OP，

I expect if user logout his session before working hrs completed(last 3 days)

Employee Remaining Time List (Attendancelist: array):
Day - 1: 00:01:12,
Day - 2: 00:00:45,
Day - 3: 00:01:00,
Day - 4: 00:00:10 and so on
You have remaining time 90Min to complete your working hour. Do you want fto still punch out ?