создать время выполнения с двумя десятичными разрядами

Question

Мне нужно создать прошедшее время и отобразить на экране для пользователя следующее: 00: 00: 00 .

В данный момент я делаю так, как естьниже, но он получает в формате 0: 0: 0 , и мне нужно в формате 01: 03: 59 .

Пользователь нажимает кнопку запуска и запускавычисление прошедшего времени.

Как я могу это сделать?

в машинописном тексте:

this.duration = {
  hours: 0,
  minutes: 0,
  seconds: 0
};



start(): void {
  const counter = setInterval(() => {

  this.duration.seconds += 1;

  if (this.duration.minutes === 60) {
    this.duration.hour += 1;
  }

  if (this.duration.seconds === 60) {
    this.duration.minutes += 1;
  }

  if (this.duration.seconds === 60) {
    this.duration.seconds = 0;
  }

}, 1000)

} ​​

в html:

{{ duration.hours }}:{{ duration.minutes }}:{{ duration.seconds }}

Answer 1

вы можете использовать существующий угловой номер трубы для каждой детали

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

таким образом, если количество ваших часов превышает 99, оно также будет отображаться правильно

---

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

Работает Демо

Answer 2

Вы можете написать свой собственный канал, например:

import _ from 'lodash';
import { Pipe, PipeTransform } from '@angular/core';

// ...

@Pipe({name: 'doubleDigits'})
export class DoubleDigitsPipe implements PipeTransform {
  transform(value: any) {
    return _.isNumber(value) && value <= 9 ? "0"+value : value;
  }
}

// HTML

{{ duration.hours | doubleDigits }}:{{ duration.minutes | doubleDigits }}:{{ duration.seconds | doubleDigits }}

Это преобразует ваш номер в строку в шаблоне, но я не думаю, что это должно вызвать проблемы.

Answer 3

Привет, ты достигни этого, используя Угловая труба

<div>{{time| date:'HH:mm:ss'}}</div> 12:01:59