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

Question

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

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

我将此任务模型绑定(bind)到一个名为 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() | 每 5 秒显示并更新一次运行时间。 async}} 但它似乎只是在 View 上渲染任何内容。

有什么帮助吗？我不认为我这样做是正确的……但我不确定如何在我的任务模型上创建动态值……在 View 中不断更新。

Answer 1

看来你做得对。

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

如果可以的话，给你一点建议:

• 使用Date.now()而不是 (new Date()).getTime()
• 使用timer和map而不是Observable构造函数——会更容易。 example
• 将 createAt 保留在模型中，并将 Observable 移至 Controller ，您将在 Controller 中重新计算值(如果您只关心显示耗时 - 那么 Controller 是一个更好的地方)

希望这有帮助。