如何以分钟为单位计算和显示时差Angular 2答案

【问题标题】：How to calculate and display time diffrence in minutes Angular2如何以分钟为单位计算和显示时差Angular 2
【发布时间】：2019-03-13 22:42:15
【问题描述】：

我有一个角度应用程序，它使用*ngFor 显示订单，每个订单都有一个日期时间字段，其中包含创建日期。我想创建一个计时器，以分钟为单位显示客户等待他的订单的时间，计算 order.time 和 now 之间的差异。我尝试使用amDifference 管道，但由于某种原因，它显示所有记录的输出相同。对一个项目执行此操作很容易，但我不知道如何在 *ngFor 循环中执行此操作。

<mat-card class="order-card" *ngFor="let order of orders?.orders">
  <mat-card-subtitle>
    Customer Name: {{ order.customerName }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Table Number: {{ order.tableNumber }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Food: {{ order.food }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Drink: {{ order.drink }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Estimated Wait Time: {{ order.waitTime }} minutes
  </mat-card-subtitle>

  <mat-card-subtitle>
    Actual wait time: <!-- this is where I want to display dynamic time diffrence between now and order.time -->
  </mat-card-subtitle>
  <button mat-button class="delete-button" color="primary" (click)="deleteOrder(order.orderId)">Remove Order</button>
</mat-card>

【问题讨论】：

你能发布你的代码 sn-p 吗？
我做了，你知道怎么做吗？
你试过moment模块吗？

标签： javascript angular typescript datetime time

【解决方案1】：

我采用了与使用 amDifference/自定义管道不同的方法。查看我的代码并建议/分享反馈。我正在预先计算班级本身的细微差别。

order.ts

export class Order {
mins:number;
    constructor(private id:number, private time:Date, private now:Date) {
        let diffInMilliSecs:number  = (this.now.getTime()-time.getTime()) ;

        let diffinMins: number = diffInMilliSecs / 1000/60;
        this.mins =Math.round(diffinMins);
    }
}

app.component.ts

import { Component} from '@angular/core';
import { Order } from './order';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'Orders';
  dateNow=new Date();



  orders = [ new Order(1,new Date("13 Mar 2019 19:50:14 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:20 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:45:55 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:02 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:00 EDT"),this.dateNow)];

}

app.component.html

<h1>  {{title}} </h1>
<h3> Time Now: {{dateNow}}</h3>

<table>
  <tr><th> Order#</th> <th>Order time</th> <th>Wait time (in mins)</th></tr>
  <tr *ngFor="let order of orders">
    <td>{{order.id}}</td>
    <td>{{order.time | date:'medium'}}</td>
     <td>{{order.mins}}</td> 
  </tr>

</table>

【讨论】：

【解决方案2】：

你可以试试这个

{{ new Date() | amDifference:  order.time : 'minutes'}} minutes

【讨论】：

无法正常工作未捕获错误：模板解析错误：解析器错误：[实际等待时间：{{ new Date() | 中第 6 列出现意外令牌“日期”) amDifference: order.time : 'minutes'}} 分钟] in ng:///AppModule/KitchenComponent.html@24:21 ("
您可以定义一个变量并将 new Date() 分配给它。然后将 new Date() 替换为上面语句中的变量。