Question

我有一个页面，将发票填充到网格中。在网格中，有一个选项可以查看特定发票的付款。该按钮将用户从“发票”页面切换到“付款”页面，然后在该页面过滤所有付款，以便仅显示与该特定发票相对应的付款。另外，当点击付款页面本身时，它将所有付款填充到网格中。我在ngOnInit（）方法中都完成了这两项工作，但是，我需要能够在两者之间进行切换。换句话说，当用户单击“发票”页面上的按钮时，并且当用户单击导航栏中的“付款”选项卡时，我希望它显示所有付款。因此，我已经测试了两个订阅并知道它们都可以工作，但是如何在两个订阅之间切换以完成此操作？任何帮助表示赞赏。

我在if语句中使用了不同的变量和相等性检查，甚至尝试更改过if语句的行位置，但都不成功

ngOnInit() {
  this.sub = this.route.params.subscribe(
    params => {
      if (params == null) { //HERE LIES THE ISSUE
         this.invoiceNum = params['invoiceNum'];

         //displays FILTERED payments
        this.paymentService.showPayments(this.invoiceNum).subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },  
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    } else {

      //displays ALL payments
      this.paymentService.getPayments().subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    }
   }
 );
}

Answer 1

您可以使用switchMap。 switchMap可以为条件返回不同的主题。

此解决方案将Route Parameter Changes主题切换为HTTP Request for payments主题。如果路由器参数包含invoiceNum，它将返回invoiceNum的特定付款对象。或者，它将返回所有付款的主题。

两种情况下都可以重复使用onNext / onError回调。

ngOnInit() {
  this.sub = this.route.params
  .pipe(
    switchMap(params => {
      if (params['invoiceNum'] !== undefined) {
        //displays FILTERED payments
        return this.paymentService.showPayments(this.invoiceNum);
      } else {
        //displays ALL payments
        this.paymentService.getPayments();
      }
    })
  )
  // Reuse onNext/onError callbacks
  .subscribe(
    res => {
      this.payments = res.value;
      this.loading = false;
      console.log(res);
    },  
    err => {
      if (err.status == 401) {
        this.auth.logOut();
      }
      this.loading = false;
      console.log(err);
    }
  );
}

在ngOnInit（）方法中的两个订阅之间切换

1 个答案: