rxjs 订阅返回重复项

Question

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

我尝试在应用程序的各个阶段通过控制台记录结果。承诺得到呈现后立即返回重复项

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

控制台在节点端点上记录 returns 查询结果的正确计数值。但是，Angular 服务代码 returns 上的相同结果的控制台记录重复，并且每次调用重复的次数增加一个。示例：第一次通话 - 2 次重复，第二次通话 - 3 次重复，第三次通话 - 3 次重复，依此类推。

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

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()
}

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

rxjs 订阅返回重复项

rxjs subscription returning duplicates

node.js

rxjs

typescript

google-cloud-datastore

angular