[解決済み] 時刻・時計を角度で表示する
2022-02-25 09:16:50
質問
私のアプリで時間を表示するために、以下の方法を使用しています。
constructor(private datePipe: DatePipe) {}
ngOnInit() {
this.getTime();
this.date = this.datePipe.transform(new Date(), "dd/MM/yyyy");
}
getTime() {
setInterval(() => {
this.time = this.datePipe.transform(new Date(), "HH:mm:ss");
this.getTime();
}, 1000);
}
このコードは正常に動作していますが、しばらくするとアプリケーションがクラッシュします。 angular4/5/6で時間を表示するための代替方法はありますか?
解決方法は?
component.ts の内部
time = new Date();
rxTime = new Date();
intervalId;
subscription: Subscription;
ngOnInit() {
// Using Basic Interval
this.intervalId = setInterval(() => {
this.time = new Date();
}, 1000);
// Using RxJS Timer
this.subscription = timer(0, 1000)
.pipe(
map(() => new Date()),
share()
)
.subscribe(time => {
this.rxTime = time;
});
}
ngOnDestroy() {
clearInterval(this.intervalId);
if (this.subscription) {
this.subscription.unsubscribe();
}
}
component.htmlの内部
Simple Clock:
<div>{{ time | date: 'hh:mm:ss a' }}</div>
RxJS Clock:
<div>{{ rxTime | date: 'hh:mm:ss a' }}</div>
作業内容 デモ
関連
-
[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。
-
[解決済み] Angular material Angular Material コアテーマが見つかりませんでした。
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] Angular HTTP GET with TypeScript エラー http.get(...).map is not a function in [null].
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular 6 エラー表示から 'mat-form-field' は既知の要素ではありません。
-
[解決済み】 node_modules/rxjs/internal/types.d.ts(81,44): エラー TS1005: ';' Angular 6のインストール後に予想されたエラー
-
[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。
-
[解決済み】Angular: オブジェクトをサポートしているdiffが見つからない '[object Object]'
-
[解決済み】angularモジュールでModule has no exported memberエラー
-
[解決済み] NullInjectorError: MatDialogRef 用のプロバイダがありません
-
[解決済み] ZoneAwarePromiseとは
-
[解決済み] プロパティ 'json' はタイプ 'Object' に存在しません。
-
[解決済み] このメソッドをリファクタリングして、認知的複雑度を21から許容される15に下げます。リファクタリングして複雑さを軽減する方法
-
[解決済み] ローカルホストが私のアンギュラーアプリに対して無効な応答を送信しました。