Angular & rxjs - 尝试使用 mergeMap 防止嵌套的 .subscribe 会产生 TS2684 错误

Question

我有两个连续的 http 请求，其中我将一些数据发送到我的后端以创建一个客户（将其视为一个组），然后从第一个请求的返回数据中创建一个属于该客户的新用户/ 团体。我正在使用带有表单的模式窗口来收集数据，在顺序请求完成后提交时我关闭了模式窗口..

这是我保存收集的数据并创建客户和用户的方法，注意两个嵌套的.subscribes...不是最好的实现，我想防止“厄运金字塔”。这是我的原...

public onSave(): void {}
  const customerData = this.dialogForm.getRawValue();
  const newUser: any = {
    Email: customerData.Email,
    IsActive: true,
    ResetPassword: false,
    Roles:[]
  };

  // add a new customer
  this.customersService.addCustomer(customerData).subscribe((res: any) => {
    newUser.ClientID = res.ID;
    // create the user
    this.usersService.create(newUser).subscribe(() => this.dialogRef.close(false));
  });
}

现在我想重构嵌套的 .subscribes。我想我需要使用.pipe、mergeMap 和do...我写了这个...

// add a new customer
this.customersService.addCustomer(customerData).pipe(
      mergeMap(res => {
        newUser.ClientID = res.ID;
        return <Observable<any>> this.usersService.create(newUser)
      }
    ).do(() => this.dialogRef.close(false)));

这显然行不通。我的 IDE 也收到以下 TS 错误

错误:(108, 7) TS2684: 'void' 类型的 'this' 上下文不是 可分配给“Observable”类型的方法“this”。

有人可以帮我解决这个问题吗？如果我需要改写我的问题，或者缺少某些内容，请告诉我。

Answer 1

你可以使用

this.customersService.addCustomer(customerData)
  .map(customer => {
    return {...newUser, ClientID: customer.ID};
  })
  .switchMap(user => this.usersService.create(user))
  .subscribe(() => this.dialogRef.close(false));

或者，如果您更喜欢可管道操作符：

this.customersService.addCustomer(customerData).pipe(
  map(customer => {
    return {...newUser, ClientID: customer.ID};
  }),
  switchMap(user => this.usersService.create(user))
).subscribe(() => this.dialogRef.close(false));