Question

我正在尝试执行3个异步操作（可观察到的），一个在另一个内部。 1.第一个可观察到的是模式对话框eventEmiter的响应-其余流程取决于其响应（假设模式返回布尔值发出者与以下内容有关：“您要删除该项目”）。 2.第二个可观察的是更新（删除）操作 3.第三个是删除后取回新数据。

我正在使用rxjs-并尝试弄清楚如何在不进行订阅的情况下进行订阅。查看我的代码：

subscriptions : Subscription[] = [];

openDeleteDialog(data : any)
{
    const modalRef : NgbModalRef = this.modalService.open(ConfirmationDialogComponent); //Modal  dialoge reference
    this.subscriptions.push(modalRef.componentInstance.passResult.subscribe( 
    (result =>//This is the response from the modal dialog
      {
        if (result)
        {
          let updateApi : UpdateApi = new UpdateApi(data);
          this.srv.updateData(updateApi).pipe( //This is the update operation
            tap(() =>
            { 
              this.srv.getData(); //This is the fetch data operation
            }
            )

          ).subscribe();
        }
      }
    )
    ));
}

Answer 1

您可以为此使用管道，过滤器和switchMap

subscriptions : Subscription[] = [];

openDeleteDialog(data : any)
{
  const modalRef : NgbModalRef = this.modalService.open(ConfirmationDialogComponent); //Modal  dialoge reference
  this.subscriptions.push(
    modalRef.componentInstance.passResult
     .pipe(
       filter((result) => !!result),
       switchMap((result) => {
          let updateApi : UpdateApi = new UpdateApi(data);
          return this.srv.updateData(updateApi);
       }),
       switchMap((updateResult) => this.srv.getData())
     ).subscribe((getDataResult) => console.log(getDataResult))
  );
}

首先，您使用过滤器仅在结果为某值时才传递数据，然后切换到新的可观察值，可观察的更新数据，同时使用管道将其切换到可观察到的获取数据。这样，您就链接了可观察对象，我想您需要等待更新数据结果才能再次获取数据。

编辑：附加信息，您正在使用tap来调用this.srv.getData()，但是如果该请求返回带有http请求的observable，则永远不会调用该请求，因为您需要在其中进行订阅发出请求的顺序。通常，我将抽头管道用于附带效果，如果需要的话，它只会需要可观察的结果，而不会修改与可观察相关的其他任何东西。

Answer 2

您可以使用mergeMap和iif运算符；

const subscription = modalRef.componentInstance.passResult
  .pipe(mergeMap(result => iif(() => result, of(result))))
  .pipe(mergeMap((result) => {
    let updateApi : UpdateApi = new UpdateApi(data);
    return this.srv.updateData(updateApi);
  }))
  .pipe(tap(() => this.srv.getData()))
  .subscribe();
this.subscriptions.push(subscription);

Answer 3

与其使用subscribes数组，还不如使用带有takeUntil的主题

finalised = new Subject<void>();

，然后开始观察，直到成为可观察链中的最后一个运算符

modalRef.componentInstance.passResult.pipe(
  filter(result => result)
  switchMap(_ => this.srv.updateData(new UpdateApi(data)),
  switchMap(_ => this.srv.getData()),
  takeUntil(this.finialised)
).subscribe(updatedDataAfterDelete => {
  // Do stuff with updated data
});

和您的ngOnDestroy

this.finialised.next();
this.finialised.complete();

这样，您可以使所有订阅都由一个主题完成，而不必将它们推送到订阅数组中。

如何订阅条件订阅结果

3 个答案: