Question

我有一系列可观察者。每个observable都是需要通过HTTP请求上传的文件。

我想做两件事：

对于每个上传的文件，我必须发出将在父组件中处理的事件。
上传所有文件后，我将返回通知所有可观察文件已完成。

我从这段代码开始：

this.isUploading$ = Observable.of(true);

const source$ = Observable.from(files)
    .concatMap(file => this.uploadSingleFile(file));

source$.subscribe(data => this.onSuccess.emit(data));

Observable isUploading$表示上传过程已启动，并且已在HTML中使用。我想根据isUploading$的状态显示微调器。

Observable source$表示文件上传操作，因为方法this.uploadSingleFile（file）返回Observable<Response>。

此代码将上传所有文件并在每个已完成的observable上执行this.onSuccess.emit(data)。

问题是：当一切都完成后，如何将this.isUploading$设置为false？

更新

我想实现类似的功能但不在onCompleted函数中分配变量。例如：

source$.subscribe(data => this.onSuccess.emit(data),
                  err => console.log(err),
                  () => this.isUploading = false );

我想要检索两个observable并在我想要的时候订阅它们。

Answer 1

为什么你需要isUploading成为一个可观察的？我这样做：

this.isUploading = true;
const source$ = Observable.from(files)
    .concatMap(file => this.uploadSingleFile(file));

source$.subscribe(data => this.onSuccess.emit(data),
                  err => console.log(err),
                  () => this.isUploading = false );

Answer 2

您只需使用BehaviorSubject即可：

public isUploading$ = new BehaviorSubject<boolean>(true);

...

this.isUploading$.next(false);
this.isUploading$.complete();

使用forkJoin运算符等待所有操作完成：

const allSources$ = Observable.forkJoin(source$);
allSources$.subscribe(data => {
    this.isUploading$.next(false);
    this.isUploading$.complete();
}

这会给你想要的结果。

Answer 3

如果要同时运行所有这些可观察对象，concatMap将无法执行您想要的操作。您可以使用do和forkJoin运算符执行这两项操作。

对于可观察对象，

forkJoin基本上是Promise.all。

do是一种利用传递和观察的值的方法，因此您可以做到＆＃34;做＆＃34;他们的东西（副作用）。

所以：

const arrayOfObservables = [observable1, observable2, observable3];

Observable.forkJoin(
  arrayOfObservables.map((obs, i) => obs.do({
    next(value) { console.log(`Observable ${i} emits: ${value}`); },
    complete() { console.log(`Observable ${i} is complete`); }
  }))
)
.subscribe(values => console.log('everything done with', values))

完成所有可观测量后通知

3 个答案: