我如何将 sec 转换为 angular2 中的 hh:mm:ss 格式

Question

我试过了

剩余时间={{counter}}

但它只显示第二种格式。我想要 hh:mm:ss 格式。我想在计时器减少的测验计时器中实现他的功能。在我的 .ts 文件中，我采用 var 计数器并使用 .map 方法使用 angular OBSERVABLE 方法进行递减。

我想减少计时器以结束测验。对于 example:1:20:60 到 0:0:0。当计时器结束时，我想提交测验。

开始计时器(){

this.countDown = Observable.timer(0,1000)
.take(this.counter)
.map( x=> --this.counter)
.subscribe(x=>this.timer(x))

}

Answer 1

你好这里有一个建议。

import {Component, Directive, Output, OnInit, EventEmitter, Input, SimpleChange} from '@angular/core'
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs/Observer';
    import 'rxjs/Rx';


    @Component({
      selector: 'my-app',
      template: `
      {{ timeMask(tick) }}
      `
    })
    export class App implements OnInit {

      private tick: number = 72;
      private myobs = Observable.timer(1000,1000).map( m =>  m );

      ngOnInit(){
        this.myobs.subscribe( x => if( this.tick > 0){ this.tick-- } );
      }

      timeMask(value: number): string {
           const minutes: number = Math.floor(value / 60);
           return minutes + ':' + (value - minutes * 60);
       }

    }

还有link for the plunker

Answer 2

我自己实现了这段代码

var callDuration = this.elementRef.nativeElement.querySelector('#time');
this.startTimer(callDuration);

startTimer(display){
var timer = 3600;
var minutes;
var seconds;
var hours;
this.display1=display;

  this.sub = Observable.interval(1000).subscribe(x => {
  hours = Math.floor(timer / 3600)
  minutes = Math.floor((timer % 3600)/60);
  seconds = Math.floor(timer % 60);

  hours = minutes < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = hours + ":" + minutes + ":" + seconds;

  --timer;
  if (timer < -1) {
    this.sub.unsubscribe();
    display.textContent ="00:00:00";
    window.alert("Times Up, Quiz Submitted");

Answer 3

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

@Component({
  selector: 'app-root',
  template: `
  {{miliseconds |date:'HH:mm:ss':'+0000'}} 
  `
})
export class AppComponent implements OnInit {
  miliseconds:number
  alive:boolean=true;
  ngOnInit()
  {
    this.miliseconds=5000;
    Observable.interval(1000)
        .takeWhile(()=>this.alive)
        .subscribe(x => {
             this.miliseconds-=1000;
             if (this.miliseconds<0)
             {
               this.miliseconds=0;
               this.alive=false;
               window.alert("Times Up, Quiz Submitted");
             }
         })
  }
}

Answer 4

使用管道。

项目中的任何位置：

import { Injectable, Pipe, PipeTransform } from '@angular/core';
/*
 * Transform seconds (number) yo hh:mm:ss string
*/

@Pipe({name: 'secondsToHhmmss'})
export class SecondsToHhmmss implements PipeTransform {
  transform(totalSeconds: number): string {
   
    const hours = Math.floor(totalSeconds / 3600)+"h";
  const minutes = Math.floor((totalSeconds % 3600) / 60) +"m";
  const seconds = (totalSeconds % 60) +"s";
  let result = `${minutes
    .toString()
    .padStart(1, '0')}:${seconds.toString().padStart(2, '0')}`;
  if (!!hours) {
    result = `${hours.toString()}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
  return result;
  }
}

接下来，将其添加到相应 app.module

的声明和导出中

在你的html

<p> Time Left={{counter}} | secondsToHhmmss </p>

我如何将 sec 转换为 angular2 中的 hh:mm:ss 格式

how can i convert sec into hh:mm:ss format in angular2

angular

typescript

angular2-observables