angular 如何将整数格式化为日期格式 hh/mm/ss

angular how to format integer to date format hh/mm/ss

我在打字稿代码中减去两个日期以获得它们之间的时差。在我得到时差作为整数后,我需要以 hh/mm/ss 格式在 html 代码中显示它。 例如,我减去两个日期并得到结果 8(int) 我现在如何以我想要的正确格式显示它?

尝试使用 angular 日期管道,但结果我得到了错误的时间,例如我减去两个日期,它们之间的差异是 8 小时,但我在 html 上得到的结果是: 2:00:00 AM,格式正确,结果错误

!!!已编辑!!!我上传 https://stackblitz.com/edit/angular-urpale

angular html :

<div class="container">
  <div class="row">
    <div class="col mt-5 mb-5">
      <p><span class="main-text">New auction </span> <span class="custom-text-2">| 5 Live auction</span></p>
    </div>
  </div>
  <table class="table" *ngIf="isAuctionsLive; else noAuctionsLive">
    <thead>
      <tr>
        <th scope="col" class="blue-text">Auction #</th>
        <th scope="col" class="blue-text">From</th>
        <th scope="col" class="blue-text">To</th>
        <th scope="col" class="blue-text">Pickup</th>
        <th scope="col" class="blue-text">Chargeable weight</th>
        <th scope="col" class="blue-text">Lowest bid</th>
        <th scope="col" class="blue-text">Time left</th>
        <th scope="col" class="blue-text">Status</th>
        <th scope="col" class="blue-text">delete later</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let auction of liveAuctionData.liveAuctions; let i=index">
        <th scope="row">{{ i }}</th>
        <td>
          <p class="text-bold">{{ auction.OriginCompany }}</p>
          <p class="custom-text-4">{{ auction.OriginAddress }}</p>
        </td>
        <td>
          <p class="text-bold">{{ auction.DestinationCompany }}</p>
          <p class="custom-text-4">{{ auction.DestinationAddress }}</p>
        </td>
        <td class="input-text">{{ auction.PickupDate | date:'dd/MM/yy' }}</td>
        <td class="input-text">{{ auction.TotalWeight }} kg</td>
        <td class="input-text">!! lowest bid !!</td>
        <td class="input-text">{{ auction.timeDifference | date:'mediumTime' }}</td>
        <td *ngIf="auction.AuctionState == 2;">
          <p class="text-gray">In progress</p>
        </td>
        <td *ngIf="auction.AuctionState == 3;">
          <p class="text-gray">In progress</p>
        </td>
        <td *ngIf="auction.AuctionState == 4;">
          <p class="text-gray">Auction ended</p>
        </td>
        <td *ngIf="auction.AuctionState == 2;">
          <button disabled class="btn btn-primary live-auctions-btn">No Bids</button>
        </td>
        <td *ngIf="auction.AuctionState == 3;">
          <button class="btn btn-primary live-auctions-btn">View Bids</button>
        </td>
        <td *ngIf="auction.AuctionState == 4;">
          <button class="btn btn-primary live-auctions-btn">Book!</button>
        </td>
      </tr>
    </tbody>
  </table>
  <ng-template #noAuctionsLive>
    <div class="row">
      <div class="col">
        <p class="text-center custom-text-2">no live auctions at the moment</p>
      </div>
    </div>
  </ng-template>
</div>

打字稿

import { Component, OnInit } from '@angular/core';
import { ClientLiveAuctionsService } from 'src/app/services/client-live-auctions/client-live-auctions.service';
import { LiveAuctions } from './../../../models/clientLiveAuctions/live-auctions';
import { AuctionsStates } from 'src/app/enums/auctions-states';
import * as moment from 'moment';

@Component({
  selector: 'app-live-auctions',
  templateUrl: './live-auctions.component.html',
  styleUrls: ['./live-auctions.component.css']
})
export class LiveAuctionsComponent implements OnInit {
  liveAuctionData: LiveAuctions = {
    liveAuctions: []
  }

  isAuctionsLive: boolean = false;
  isInProgress: boolean = false;
  date1;
  date2;
  hours;

  constructor(private _clientLiveAuctionsService: ClientLiveAuctionsService) { }

  ngOnInit() {
    this._clientLiveAuctionsService.getLiveAuctions()
      .subscribe((liveAuctionDataFromServer) => {
        this.liveAuctionData.liveAuctions = liveAuctionDataFromServer;
        for (var i = 0; i < this.liveAuctionData.liveAuctions.length; i++) {
          this.liveAuctionData.liveAuctions[i].timeDifference = Math.abs((new Date(this.liveAuctionData.liveAuctions[i].StartDate) as any) - (new Date(this.liveAuctionData.liveAuctions[i].BidEndDate) as any)) / 36e5;
        }
        console.log(this.liveAuctionData.liveAuctions);
        if (this.liveAuctionData.liveAuctions.length == 0) {
          this.isAuctionsLive = false;
        } else {
          this.isAuctionsLive = true;
        }


      })

  }

}

如何解决这个问题?

您需要将计算出的数字转换成这样的形式

duration : {
  hours: number,
  minutes: number,
  seconds: number
};

那就用这个管道来展示吧

{{ duration.hours | number:'2.0-0'}}/{{ duration.minutes | number:'2.0-0'}}/{{ duration.seconds | number:'2.0-0'}}

你的更新stackblitz