Javascript 角度2可观察，setInterval未使用异步管道在模板中更新

我有一个名为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;
}

在模板中，我使用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.{u name}}-{{task.value.{u color}}-{{task.value.getRunningTime（）| async}}
去除
更新
开始

我试图使用

{{task.value.getRunningTime（）| async}}}

每隔5秒显示和更新一次运行时间，但它似乎只是在视图上不呈现任何内容

---

有什么帮助吗？我不认为我做得对……但我不确定如何在我的任务模型上创建一个动态值……在视图中不断更新

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

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

---

看来你做得对

尽管您可能会在这里得到一个异常

newdate（）.getTime（）

，但这个角度异步管道会被吞没。尝试

（new Date（））.getTime（）

测试此假设

请允许我提一点建议：

• 使用而不是

  （新日期（））。getTime（）

• 将

  计时器

  与

  映射

  一起使用，而不是使用可观察的构造函数，这样会更容易
• 将createdAt保留在模型中，并将Observable移动到控制器，在那里您将重新计算值（如果您只想显示经过的时间，那么控制器是一个更好的位置）

希望这有帮助

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