Question

我有两个连续的http请求，我在其中向我的后端发送一些数据来创建一个Customer（想象这就像一个组）然后从第一个请求返回的数据中创建一个属于该Customer的新用户/组。我使用带有表单的模态窗口来收集数据，在顺序请求完成后提交我关闭模态窗口..

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

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：＆＃39; this＆＃39;类型的背景＆＃39; void＆＃39;不是可分配给方法＆＃39;这个＆＃39;类型＆＃39; Observable＆lt; {}＆gt;＆＃39;。

有人可以帮我解决这个问题吗？如果我需要重新提出问题，或者遗漏了某些内容，请告诉我。

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));

Angular＆amp; rxjs - 尝试使用mergeMap阻止嵌套.subscribes会产生TS2684错误

1 个答案: