rxjs 订阅返回重复项

Question

从 Angular 服务订阅后，返回的结果是一堆重复的。每调用一次，重复次数就会增加一次。

我尝试在应用程序的各个阶段通过控制台记录结果。在 promise 被渲染后立即返回重复项

Angular 服务代码：

GetUserPendingApprovals(userid: string) {
    let approvalsPending: any[] = [];
    this.http
      .get<{message, approvals: any}>(`/api/approvals/${userid}`)
        .subscribe(approvals => {
          console.log(approvals.approvals);
          approvalsPending = approvals.approvals;
          this.approvalsUpdated.next(approvalsPending);
          approvalsPending = [];
      });
  }
getUserPendingApprovalsUpdateListener() {
  return this.approvalsUpdated.asObservable();
}

节点端点：

app.get("/api/approvals/:userid", (req, res, next) => {
  // const urlData = req.params.userId;
  //console.log(urlData);
  const query = datastore
  .createQuery('approvals')
  .filter('src', '=', req.params.userid);

  query.run().then(approvals => {
  approvals.forEach(approval => console.log(approval));
  console.log(approvals[0].length);
  res.status(200).json(
    {
      message: "Request was processed successfully!",
      approvals: approvals[0]
    }
  );
})
})

节点端点上的控制台日志记录为正在查询的结果返回正确的计数值。但是，在 Angular 服务代码上对相同结果的控制台日志记录会返回重复项，并且每次调用重复项的数量都会增加一个。示例：第 1 次调用 - 2 个重复，第 2 次调用 - 3 个重复，第 3 次调用 - 3 个重复，依此类推。

更多信息... 我正在从我的角度组件进行嵌套订阅。像下面这样 -

ngOnInit() {
    this.activatedRoute.params
      .subscribe(
        (params: Params) => {
         ....some code goes here...
         this.revenueService.GetUserInvoicesThisWeek(this.userid);
         this.currentWeekInvoicesSub = this.revenueService.GetUserInvoicesThisWeekListener()
            .subscribe((revenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.currentDayInvoicesSub = this.revenueService.GetUserInvoicesTodayListener()
            .subscribe((todayRevenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.approvalsService.GetUserPendingApprovals(this.userid);
         this.approvalsSub = this.approvalsService.getUserApprovalsUpdateListener()
            .subscribe((approvalsPending: any[]) => {
            ....some code goes here...
            });
         });
}

最后一次订阅是我遇到问题的地方。但是我很确定在节点端点调用返回重复之后立即呈现的承诺。我在这个问题的开头提到的东西。

疑问： 这些重复的根本原因是什么？ 如何解决这个问题？

Answer 1

每次调用此函数时您都在订阅，因此每次更改路线时您都在进行重复订阅。

GetUserPendingApprovals(userid: string) {
            let approvalsPending: any[] = [];
            this.http
              .get<{message, approvals: any}>(`/api/approvals/${userid}`)
                .subscribe(approvals => {
                  console.log(approvals.approvals);
                  approvalsPending = approvals.approvals;
                  this.approvalsUpdated.next(approvalsPending);
                  approvalsPending = [];
              });
          }

订阅组件而不是服务以解决此问题。

GetUserPendingApprovals(userid: string) {

    return this.http
          .get<{message, approvals: any}>(`/api/approvals/${userid}`)

      }

组件 ts：

 ngOnInit(){
   this.aprovalSub = this.approvalsService.GetUserPendingApprovals(this.userid);
    .subscribe(approvals => {
                      approvalsService.approvalsPending = approvals.approvals;
                      approvalsService.approvalsUpdated.next(approvalsPending);
                       });
}

ngOnDestroy(){
  if(this.aprovalSub !== undefined) this.aprovalSub.unsubscribe()
}

在组件被销毁时清理订阅，否则它们将留在内存中，您将有订阅占用内存。