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

在节点端点上登录的控制台为正在查询的结果返回正确的计数值。但是，控制台在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()
}

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

rxjs订阅返回重复项

1 个答案: