угловой, как отформатировать целое число в формат даты чч / мм / сс

Question

я вычитаю две даты, чтобы получить разницу во времени между ними в машинописном коде. после того, как я получил разницу во времени как целое число, мне нужно отобразить ее в HTML-код в формате чч / мм / сс. В качестве примера я вычитаю две даты и получаю результат 8 (int). Как мне теперь отобразить его в правильном формате, который я хочу?

попытался использовать угловые конвейеры дат, но в результате я получил неправильное время, в качестве примера я вычел две даты, что разница между ними составляет 8 часов, но результат, который я получил в html: 2:00:00 AM, формат был правильный, но неправильный результат

!!! отредактирован !!! я загружаю https://stackblitz.com/edit/angular-urpale

угловой 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;
        }


      })

  }

}

как решить эту проблему?

Answer 1

Вам нужно преобразовать вычисленное число в что-то вроде этого

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