Отображать текущее время с моментами - PullRequest
Новая
       5

Отображать текущее время с моментами

0 голосов
/ 07 декабря 2018

Я пытаюсь создать компонент часов, который показывает текущее время динамически.

Проблема: Время отображается как ожидаемое при нагрузке ( ЧЧ: мм A ), но часы не меняются вообще.

clock.component.ts: 

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import * as moment from "moment";

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: moment.Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
        this.pageLoaded = moment(new Date());

        this.time = interval(1000).pipe(
            map(() => this.pageLoaded.format("HH:mm A")),
            distinctUntilChanged()
        );
    }
}

clock.component.html: 

<div>{{ time | async }}</div>

1 Ответ

0 голосов
/ 07 декабря 2018

Прежде всего, если я буду там, где вы, я буду использовать @types/moment, чтобы облегчить мою жизнь (необязательно).

Итак, почему «часы вообще не меняются»?

, потому что вы инициализировали значение часов после загрузки страницы, и это значение не будет обновляться, поэтому в основном this.time содержит инициализированное значение, а не обновленное значение, поэтому следующее то же самое, что и component, но снебольшое издание. 

import {
    ChangeDetectionStrategy,
    Component,
    OnInit
} from "@angular/core";
import { Observable, interval } from "rxjs";
import { map, distinctUntilChanged } from "rxjs/operators";
import moment, { Moment } from "moment"; // using @types/moment

@Component({
    selector: "app-clock",
    templateUrl: "./clock.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent implements OnInit {

    pageLoaded: Moment;
    time: Observable<string>;

    constructor() {}

    ngOnInit() {
    this.time = interval(1000*60).pipe( // why you need 1s interval with HH:mm time format simply update it every minute not every second.
      map(() => {
        this.pageLoaded = moment(new Date()); // you need the value of now not the value of the initialized time.
        return this.pageLoaded.format("HH:mm A");
      })
    );
  }
}

и ваш взгляд такой, какой он есть.

Вот пример стекаблица, проверьте сами https://stackblitz.com/edit/angular-moment-rxjs

...