javascript - 如何计算和显示以分钟为单位的时差Angular 2

Question

我有一个 Angular 应用程序，它使用 *ngFor 显示订单，每个订单都有一个日期时间字段，其中包含创建日期。我想创建一个计时器，以分钟为单位显示客户等待订单的时间，计算 order.time 和现在之间的差异。我尝试使用 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>

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