Question

我正在尝试创建一个动态显示当前时间的时钟组件。

问题：时间显示为预期的负载时间（ HH：mm A ），但时钟完全没有变化。

clock.component.ts：

ANDROID_HOME

clock.component.html：

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()
        );
    }
}

Answer 1

首先，如果我在您的位置，我将使用@types/moment使我的生活更轻松（可选）。

那么，为什么“时钟根本不改变”？

因为您是在页面加载后初始化时钟的值，并且此值不会更新，所以基本上this.time保留了初始化值，而不是更新后的值，因此，以下内容与您的{{ 1}}，但有一个小版本。

component

和您的视图一样。

这是一个令人难以置信的例子，https://stackblitz.com/edit/angular-moment-rxjs

使用moment.js显示当前时间

1 个答案: