如何订阅有条件的订阅结果

Question

我正在尝试执行 3 个异步操作（可观察对象），一个在另一个内。 1. 第一个可观察到的是模态对话框 eventEmiter 的响应——流程的其余部分取决于它的响应（假设模态 return 布尔发射器涉及："Do you want to delete the item"）。 2. 第二个observable是更新（删除）动作 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

您可以使用 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 2

您可以为此使用管道、过滤器和 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()，但是如果那个 returns 是一个带有 http 请求的可观察对象，则永远不会调用该请求，因为您需要订阅它才能发出请求。作为一般规则，我将自来水管用于附带效果，它只需要可观察的结果，但不会修改与可观察相关的任何其他内容，如果有任何意义的话。

Answer 3

不要使用订阅数组，而是使用带有 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();

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

如何订阅有条件的订阅结果

how to subscribe in a conditional subscription result

rxjs

angular

rxjs-subscriptions