带有setInterval的Angular 2 Observable未使用异步管道在模板中更新答案

【问题标题】：Angular 2 Observable with setInterval not updating in template using async pipe带有setInterval的Angular 2 Observable未使用异步管道在模板中更新
【发布时间】：2019-07-17 16:47:33
【问题描述】：

我有一个名为 Task 的模型类。在其中，我通过创建一个返回 observable 的函数来获取运行时间...

public getRunningTime(): Observable<number> {
    const runningTimeObservable = new Observable<number>(observer => {
        setInterval(() => {
            if (this.isActive) {
                const currentTime = new Date().getTime();
                observer.next(currentTime - this.startTime);
            }
            observer.next(this.endTime - this.startTime);
        }, 5000);
    });
    return runningTimeObservable;
}

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

export class TaskListComponent {

  tasks: object;

  constructor(
    private taskRepositoryService: TaskRepositoryServiceService,
    private taskFactoryService: TaskFactoryService,
    private taskInputDialog: MatDialog) {
    this.tasks = taskRepositoryService.getAllTasks();
  }

在模板中我使用 ngFor 来迭代。

<ul>
    <li *ngFor="let task of tasks | keyvalue">
        {{task.value._name}} - {{task.value._color}} <span *ngIf="task.value.startTime">- {{task.value.getRunningTime() | async}}</span>
        <button mat-button color="warn" (click)="removeTask(task.value)">Remove</button>
        <button mat-button (click)="updateTask(task.value)">Update</button>
        <button mat-button (click)="startTask(task)">Start</button>
    </li>
</ul>

我正在尝试使用{{task.value.getRunningTime() | async}} 每 5 秒显示和更新一次运行时间，但它似乎只是在视图上不渲染任何内容。

有什么帮助吗？我不认为我在做这个可观察的正确......但我不确定如何在我的任务模型上创建一个动态值......在视图中不断更新。

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

看来你做得对。

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

如果可以的话，给点建议：

使用Date.now() 而不是(new Date()).getTime()
使用timer 和map 而不是Observable 构造函数——会更容易。 example
在模型中保留 createdAt 并将 Observable 移动到控制器，在那里您将重新计算值（如果您只关心显示经过的时间 - 那么控制器是一个更好的地方）

希望这会有所帮助。

【讨论】：