Angular 2 Наблюдаемый с setInterval не обновляется в шаблоне с помощью асинхронного канала

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>

Я пытаюсь получить время выполненияотображается и обновляется каждые 5 секунд с использованием {{task.value.getRunningTime() | async}}, но, похоже, на экране ничего не отображается.

Любая помощь?Я не думаю, что я делаю это наблюдаемое правильно ... но я не уверен, как я могу создать динамическое значение в моей модели задач ... которое постоянно обновляется в представлении.

Answer 1

Кажется, вы все делаете правильно.

Хотя вы можете получить здесь исключение new Date().getTime(), эта угловая асинхронная труба глотает.Попробуйте (new Date()).getTime() проверить это предположение.

Небольшой совет, если можно:

• использовать Date.now() вместо (new Date()).getTime()
• используйте timer с map вместо наблюдаемого конструктора - будет проще. пример
• сохранить созданное в модели и переместить Observable в контроллер, где вы пересчитаете значения (если вам нужно только отобразить прошедшее время - тогда контроллер - лучшее место длячто)

Надеюсь, это поможет.

Answer 2

Если я правильно понимаю, вы хотите выполнить асинхронное действие по таймеру?Используйте RXJS Timer для создания наблюдаемой, которая запускается с интервалом, а затем используйте flatMap для сопоставления этого события с вашим асинхронным вызовом, который обновляет вашу модель представления.Может выглядеть примерно так:

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