Question

im将两个日期相减，以得出打字稿代码之间的时间差。我将时间差作为整数获取后，我需要以hh / mm / ss格式将其显示在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

您需要将计算出的数字转换为这样的数字

bsName.m_str

然后使用此管道进行显示

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>

您更新的stackblitz

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

1 个答案: