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
我在打字稿代码中减去两个日期以获得它们之间的时差。在我得到时差作为整数后,我需要以 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