Question

我想实现以下目标：我在初始化中有多个步骤，每个步骤都是可观察的。每个步骤都应通过 next（）调用更新其状态，该内容显示在Angular模板中。

由于每个步骤都依赖于之前的步骤，因此应按顺序执行。

问题在于所有步骤都应具有初始状态，以便用户至少可以看到所有步骤，即使尚未观察到它们的可观察对象。

有没有办法实现这一目标？还是我需要从显示的数据中分离出可观察的数据，并在每次 next（）调用中更改该数据？

编辑：由于似乎很难理解我想要实现的目标，因此我尝试以一个示例进行解释：我的初始化有3个步骤。 任务1 ，任务2 ，任务3 。对于每个任务，将在html中显示一行，其中包含任务的描述和状态（例如，正在进行的或 complete ）。当然，即使尚未订阅某些任务，从一开始就应该可以看到每个任务的描述。一旦上一个任务完成，下一个任务就应该开始。任务的更新应通过每个Observable中的 next（）调用来传递。

Edit2：以下是一些基本解决方案的代码：

// This is how a basic task should look like
interface Task {
     description: string,
     progressMessage: string,
     status: 'running' | 'idle' | 'complete',
     children: Task[],
     task: Observable<TaskStatus>
}
// This should be the format of each next call
interface TaskStatus {
    progressMessage?: string,
    status?: 'running' | 'idle' | 'complete'
}
// Wait for each task, on complete run next one, is there a better way ?
private async runTasks(): Promise<void> {
    for (let task of this.tasks) {
        await new Promise((resolve, reject) => {
            task.task.subscribe({
                next: (taskStatus: TaskStatus) => {
                    if (taskStatus.status) {
                        task.status = taskStatus.status;
                    }
                    if (taskStatus.progressMessage) {
                        task.progressMessage = taskStatus.progressMessage;
                    }
                },
                error: (error: Error) => {
                    console.log(error);
                    reject(error);
                },
                complete: () => resolve()
            });
        });
    }
}
private registerNewTask(description: string, taskFactory: () => Observable<TaskStatus>): void {
    const taskObservable: Observable<TaskStatus> = taskFactory();
    const newTask: Task = {
        description: description,
        progressMessage: '',
        status: 'idle',
        children: [],
        task: taskObservable
    };
    this.tasks.push(newTask);
}
private task1(): Observable<TaskStatus> {
    return Observable.create((observer: Observer<TaskStatus>) => {
        observer.next({ progressMessage: 'Started', status: 'running' });
        setTimeout(() => {
            observer.next({ progressMessage: 'Finished', status: 'complete' });
            observer.complete();
        }, 10000);
    });
}

private task2(): Observable<TaskStatus> {
    return Observable.create((observer: Observer<TaskStatus>) => {
        observer.next({ progressMessage: 'Started', status: 'running' });
        setTimeout(() => {
            observer.next({ progressMessage: 'Finished', status: 'complete' });
            observer.complete()
        }, 10000);
    });
}

这是我到目前为止找到的唯一方法。有没有更好的方法来处理任务的执行？ concat 似乎不起作用，因为我需要在订阅的 next（）调用中访问整个 Task 对象，因此我需要手动迭代每个对象并等待一个承诺。

让Observables发出第一个“状态”，而不是等待之前的状态完成

0 个答案: