Разница во времени в Ангуляре 6 - PullRequest
Новая
       19

Разница во времени в Ангуляре 6

0 голосов
/ 14 сентября 2018

Мне нужно показывать разницу во времени в интерфейсе пользователя, обновляемом каждую секунду.

То, что я пробовал, это:

component.ts 

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
import { Observable, Subscription } from 'rxjs/Rx';
import { DateUtil } from '../../../framework/Utils/DateUtil';

@Component({
  selector: 'app-time-difference',
  templateUrl: './time-difference.component.html',
  styleUrls: ['./time-difference.component.scss']
})
export class TimeDifferenceComponent implements OnInit {
  orderTime = '14-09-2018 14:00:00';
  today = new Date();

  clock: Observable<any>;
  timeDifference: string;

  constructor() { }

  ngOnInit() {
    this.clock = Observable
      .interval(1000)
      .map(() => {
        const orderDate = DateUtil.getDatefromString(this.orderTime, 'DD-MM-YYYY HH:mm:ss');
        const timeDifference = DateUtil.getDateDiffInHours(orderDate, new Date());
        return timeDifference;
      });

    this.clock.subscribe(
      res => console.log(res)
      );
  }
}

.html 

<div class="row mt-5 ml-5" style="margin-left:20px;">
    {{clock | async}}
</div>

DateUtil func 

static getDateDiffInHours(startDate, endDate)
{
    let start = moment(startDate);
    let end = moment(endDate);
    let diff = moment.duration(end.diff(start));
    let milliSec = diff.milliseconds();
    let dateString = moment(milliSec).format('DD-MM-YYYY HH:mm:ss');
    return moment(dateString, 'DD-MM-YYYY HH:mm:ss').toDate();
}

Может кто-нибудь сказать мне, где я допустил ошибку?

Поскольку я не получаю разницу времени обновления в пользовательском интерфейсе, но я получаю объект продолжительности обновления в консоли

Статический результат в пользовательском интерфейсе

PT10H13M26.992S

1 Ответ

0 голосов
/ 15 сентября 2018

Ну, это не значит, что вид не обновляется.Если вы внимательно посмотрите, какой вывод вы получите в консоли - это всегда одна и та же дата.Реализация получения разницы во времени довольно грязная и может быть выполнена лучше.

Без каких-либо внешних утилитных функций реализация может выглядеть следующим образом: 

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Rx';
import {DateUtil} from '../utils/DateUtil';
import * as moment from 'moment';

@Component({
  selector: 'app-time-difference',
  templateUrl: './time-difference.component.html',
  styleUrls: ['./time-difference.component.css']
})
export class TimeDifferenceComponent implements OnInit {
  orderTime = '14-09-2018 14:00:00';
  clock: Observable<any>;

  constructor() { }

  ngOnInit() {
    // order date in millis (can be computed once)
    const orderDate: number = moment(this.orderTime, 'DD-MM-YYYY HH:mm:ss').valueOf();
    this.clock = Observable
      .interval(1000)
      .map(() => {
        return Date.now() - orderDate;
      });

    this.clock.subscribe(
      res => console.log(res) // Output difference in millis
    );
  }
}

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

<div class="row mt-5 ml-5" style="margin-left:20px;">
    {{(clock | async) | date:'dd HH:mm:ss'}}
</div>

Если вам нужен какой-то специальный формат даты в выходных данных, вы можете отобразить наблюдаемые часы любым удобным для вас способом.Например: 

const orderDate: number = moment(this.orderTime, 'DD-MM-YYYY HH:mm:ss').valueOf();
    this.clock$ = Observable
      .interval(1000)
      .map(() => {
        return Date.now() - orderDate;
      })
      .map((millis: number) => {
        return moment.duration(millis);
      })
      .publishReplay(1).refCount(); // so that calculation is performed once no matter how many subscribers

this.days$ = this.clock$.map(date => date.days());
this.hours$ = this.clock$.map(date => date.hours());
this.minutes$ = this.clock$.map(date => date.minutes());
this.seconds$ = this.clock$.map(date => date.seconds());

И в шаблоне: 

<ul>
    <li><span id="days">{{days$ | async}}</span>Days</li>
    <li><span id="hours">{{hours$ | async}}</span>Hours</li>
    <li><span id="minutes">{{minutes$ | async}}</span>Minutes</li>
    <li><span id="seconds">{{seconds$ | async}}</span>Seconds</li>
</ul>

Надеюсь, это поможет.

...