如何在变量打字稿中动态设置当前时间

Posted 2023-03-13

【中文标题】如何在变量打字稿中动态设置当前时间

【英文标题】：How to set current time dynamically in a variable typescript

【发布时间】：2021-11-23 08:46:43

【问题描述】：

我正在开发一个应用程序，我应该根据当前时间以小时为单位设置消息。

例如，如果时间是：23:35:2，我应该将字符串设置为Good night <user name>，如果时间到了4:00:0，我想相应地设置Good morning <user name>。

目前我正在 Angular 服务的 BehaviourSubject 中编写逻辑。我使用javascript获取当前时间。但是在我控制台记录值之后，时间是静态的。

let currentDate = new Date();
let time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
console.log(time);

所以我设置了BehaviourSubject 并尝试动态获取时间，但值仍然是静态的。

下面是我的服务文件代码

import  HttpClient  from '@angular/common/http';
import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs';

@Injectable(
  providedIn: 'root'
)
export class AppService 
  
  private time: BehaviorSubject<string>;

  constructor(private http:HttpClient)  

  getDate() 
    let currentDate = new Date();
    let time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
    console.log(time);
    return this.time.next(JSON.stringify(time));
     

并尝试像这样在我的主文件中调用它。

ngOnInit() 
    return this.appService.getDate();
  

我收到错误 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'next')

我对角熊几乎不陌生。如有任何帮助，我将不胜感激。

【问题讨论】：

如果我没看错（玩具示例），您希望能够在页面上放置一个按钮，让它随着时间的变化从黑色变为黄色并再次变为黑色？为此，您需要检查每个间隔步骤（轮询）的时间并在每个步骤中进行更新。 FWIW 轮询频繁会导致性能不佳。

关于行为主题——看起来你的问题是你没有初始化它。在构造函数中，您可能需要this.time = new BehavioralSubject(currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds())

您可以这样做（通常使用 setTimeout 或 setInterval 完成），但这是每 n 秒调用一次函数——严格来说，不是观察时钟变量的变化。我现在理解了这个误解——你认为时钟是一个不断更新的变量，我会认为时钟是一个函数，它返回从现在到 1970 年 1 月 1 日之间的秒数。

哇，我现在清楚了。谢谢。

如果这对你有用，请检查这个stackblitz.com/edit/…

【参考方案1】：

服务中

  date = new Date();
  
  getDate() 
    return interval(1000).pipe(map(_ => this.getDateTime()));
  

  // get new time by adding + sec
  private getDateTime() 
    this.date.setSeconds(this.date.getSeconds() + 1);
    return (
      this.date.getHours() +
      ':' +
      this.date.getMinutes() +
      ':' +
      this.date.getSeconds()
    );
  

在您的组件中：

 time$: Observable<any>;

  constructor(private appService: AppService) 
    this.time$ = this.appService.getDate();
  

在模板中

Time  this.time$ | async 

Demo

如果您想将延迟时间增加到间隔 ex。每 5 秒只需更改 interval(5000) 参数以及此处的 this.date.setSeconds(this.date.getSeconds() + 5);

【讨论】：

这很好用，我已将间隔更改为 5000，但初始渲染需要更多时间

最初也是5秒开始

太伤心了，有什么解决方法吗？我想尽快在 dom 中显示，稍后我可以显示动态值

使用timer(1000, 5000). 而不是interval。开始会延迟 1 秒，然后会延迟 5 秒

别忘了在这里也改一下this.date.setSeconds(this.date.getSeconds() + 5);