2

我正在尝试执行 3 个异步操作（可观察），一个在另一个内部。1. 第一个 observable 是模态对话框 eventEmiter 的响应 - 流程的其余部分取决于它的响应（假设模态返回布尔发射器涉及：“你想删除项目”）。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();
        }
      }
    )
    ));
}
4

3 回答 3

3

您可以为此使用管道、过滤器和 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))
  );
}

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

编辑：附加信息，您使用 tap 来调用this.srv.getData()，但如果它返回带有 http 请求的 observable，则永远不会调用该请求，因为您需要订阅它才能发出请求。作为一般规则，我将自来水管用于附带效果，它只需要可观察的结果，但不会修改与可观察相关的任何其他内容，如果这有任何意义的话。

于 2019-10-27T09:38:55.640 回答
0

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

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

于 2019-10-27T09:46:02.210 回答
0

可以使用mergeMapandiif运算符；

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);
于 2019-10-27T09:35:18.333 回答