使用setInterval的Angular 2 Observable無法在模板中使用異步管道進行更新

Question

我有一個名為Task的模型類。 在其中，我通過創建一個返回可觀察到的函數來獲得運行時間。

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秒顯示和更新一次運行時間{{task.value.getRunningTime() | async}} {{task.value.getRunningTime() | async}}但似乎無法在視圖上呈現任何內容。

有什么幫助嗎？ 我不認為我在做這種可觀察的權利...但是我不確定如何在我的Task模型上創建動態值...該值會在視圖中不斷更新。

Answer 1

看來您做對了。

雖然您可能在這里遇到了一個new Date().getTime()的異常new Date().getTime() ，但該角度異步管道會吞下。 嘗試使用(new Date()).getTime()測試此假設。

如果我可以的話，請提供一些建議：

• 使用Date.now()代替(new Date()).getTime()
• 在map使用timer而不是Observable構造函數-會更容易。 例
• 在模型中保持createdAt並將Observable移至控制器，在該控制器中您將重新計算值（如果您只想顯示經過的時間，那么控制器是一個更好的選擇）

希望這可以幫助。

Answer 2

如果我理解正確，是否要根據計時器執行異步操作？ 使用RXJS Timer創建一個間隔觸發的可觀察對象，然后使用flatMap將該事件映射到更新視圖模型的異步調用。 可能看起來像這樣：

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