使用setInterval的Angular 2 Observable无法在模板中使用异步管道进行更新

Question

我有一个称为Task的模型类。在其中，我通过创建一个返回可观察到的函数的函数来获取运行时间。

  public getRunningTime（）：可观察 {
    const runningTimeObservable =新的Observable （observer => {
        setInterval（（）=> {
            如果（this.isActive）{
                const currentTime = new Date（）。getTime（）;
                viewer.next（currentTime-this.startTime）;
            }
            viewer.next（this.endTime-this.startTime）;
        }，5000）；
    }）;
    返回runningTimeObservable;
}
 

我将此Task模型绑定到一个名为TaskListComponent的组件。该组件保留了一个包含每个任务的对象。

 导出类TaskListComponent {

  任务：对象；

  构造函数
    私有taskRepositoryService：TaskRepositoryServiceService，
    私有taskFactoryService：TaskFactoryService，
    私人taskInputDialog：MatDialog）{
    this.tasks = taskRepositoryService.getAllTask​​s（）;
  }
 

我在模板中使用ngFor进行迭代。

  

    

        {{task.value._name}}-{{task.value._color}} -{{task.value.getRunningTime（）|异步}} 
        删除
        更新
        开始
    

 

我正在尝试使用 {{task.value.getRunningTime（）| async}} ，但它似乎只在视图上不呈现任何内容。

有帮助吗？我不认为我在做这种可观察的权利...但是我不确定如何在我的Task模型上创建动态值...该值会在视图中不断更新。

Answer 1

看来您做得对。

尽管您在new Date().getTime()可能会遇到异常，但是角度异步管道会吞下。尝试(new Date()).getTime()来检验这个假设。

如果可以的话，请教一些建议

• 使用Date.now()代替(new Date()).getTime()
• 将timer与map一起使用，而不是Observable构造函数-会更容易。 example
• 保留模型中的createdAt并将Observable移至控制器，在该控制器中您将重新计算值（如果您只想显示经过的时间，那么控制器是一个更好的选择）

希望这会有所帮助。

Answer 2

如果我理解正确，您想根据计时器执行异步操作吗？使用RXJS Timer创建一个间隔触发的可观察对象，然后使用use flatMap将事件映射到更新视图模型的异步调用。可能看起来像这样：

timer(0, 5000).pipe( flatMap(() => taskRepositoryService.getAllTasks()))
 .subscribe(tasks => this.tasks = tasks);