将asObservable（）与Angular中的Subject一起使用时，未触发Observable吗？

Question

我有一个向用户显示表单的组件。 一旦用户在该表单上选择了“提交”按钮，我想触发向后端的http.post请求

我想和他一起使用BehaviorSubject和.asObservable（）。 异步管道来实现这一点。

我在PreOrderComponenT组件ts文件中进行了以下设置：

preOrder$ = this.preOrderService.preOrder$;

onSubmit() {
    console.log(this.preOrderForm);
    const preOrderForm: PreOrderForm = {
      firstName: this.preOrderForm.value.firstName,
      lastName: this.preOrderForm.value.lastName,
      phoneNumber: this.preOrderForm.value.phoneNumber,
      email: this.preOrderForm.value.email,
      orderDetails: {
        quantity: this.preOrderForm.value.orderDetails.quantity,
        size: this.preOrderForm.value.orderDetails.size,
        gearItemId: this.gearItem.id
      },
      contactPreference: {
        cellOrEmail: this.preOrderForm.value.contactPreference.cellOrEmail
      }
    };
    this.preOrderService.preOrderGearItem(preOrderForm);
  }

在PreOrderComponent中，模板中包含以下内容：

<ng-container *ngIf="preOrderService.preOrder$ | async as preOrderItem">
  <div> TEST </div>
</ng-container>

在PreOrderService我具有以下内容：

    preOrderAction: BehaviorSubject<PreOrderForm> = new BehaviorSubject<
        PreOrderForm
      >(null);

      preOrder$ = this.preOrderAction.asObservable().pipe(
        switchMap((preOrderForm: PreOrderForm) => {
          console.log("PreORderTriggered");
          return this.preOrderGearItemAsync(preOrderForm);
        })
      );

    preOrderGearItem(preOrderForm: PreOrderForm) {
        console.log("Pre order form is:", preOrderForm);
        this.preOrderAction.next(preOrderForm);
      }

    preOrderGearItemAsync(preOrderForm: PreOrderForm): Observable<PreOrderForm> {
        if (preOrderForm === undefined) {
          return of(null);
        }
        return this.http
          .post<PreOrderForm>(
            `${this.merchandiseUrl}/${
              preOrderForm.orderDetails.gearItemId
            }/pre-order`,
            JSON.stringify(preOrderForm),
            this.headers
          )
}

问题是我无法触发http请求。 我不确定自己在做什么错。

Answer 1

您的代码正在“运行”，您可以通过以下堆栈闪电看到： https ://stackblitz.com/edit/angular-nm5pcd

但是，我能否强调两点，并建议您改进一下？

1）在服务初始化时立即调用http请求（即使没有提交）

发生这种情况是因为BehaviourSubject为“ null”的第一个值，并且因为=== undefined应该为=== null 。 甚至更好，您可以使用filter运算符。

preOrder$ = this.preOrderAction.asObservable().pipe(
  filter((preOrderForm: PreOrderForm) => !!preOrderForm),
  switchMap((preOrderForm: PreOrderForm) => {
    return this.preOrderGearItemAsync(preOrderForm);
  })
); 

2）您也可以考虑另一种方式来调用您的帖子请求。

a）解决方案A

保持非常简单。 因此，只需从您的组件中调用service.preOrderGearItemAsync ，进行订阅，检索结果并将其显示。

this.preOrderService.preOrderGearItemAsync(preOrderForm).subscribe(response => {
  this.result = response;
});

b）解决方案B

如https://stackblitz.com/edit/angular-nm5pcd中的NewPreOrderService中所示。

您的组件可以调用preOrderGearItem方法，该方法通过订阅来调用http.get ，然后在BehaviourSubject上调用next ，以使最后的结果可用于您的组件。

希望会有所帮助。