Question

使用Angular，我创建了一个组件，该组件与循环中使用的两个其他组件一起触发初始Web请求。我正在遍历这些项以设置siteCount，该变量在第一个循环的请求中声明。我正在使用setTimeout()将总金额推送到一个数组，但这可能不是最佳实践。

  constructor(public http: HttpClient, public chart: ChartDetails) {

    this.http.get(`https://siteurl.com/items?$filter=Hub/Title eq 'Project Hub' and Active eq 'Yes'`).subscribe(data => {
      data['value'].forEach(item => {
        let siteCount: number = 0
        this.http.get(`${item.Site}/lists/?$filter=BaseTemplate eq 171`).subscribe(data => {

          data['value'].forEach(list => {
            this.http.get(`${item.Site}/lists(guid'${list.Id}')/items`).subscribe(data => {
              this.myTasks = data['value']

              this.myTasks.forEach(variable => {
                variable.internalListName = list.EntityTypeName.replace("List", "")
              });

              siteCount += data['value'].length
            })
          });

        })

        setTimeout(() => {
          if (siteCount) {
            this.chart.goalChartLabels.push(item.Title)
            this.chart.goalChartData.push(siteCount)
          }
        }, 500);

      });
    })

  }

在不使用setTimeout的情况下，如何将item.Title合计并且在下一项重置为0之前如何推入siteCount和siteCount？

Answer 1

我的初始版本如下：

import { zip } from 'rxjs';

...

   this.http.get(`https://siteurl.com/items?$filter=Active eq 'Yes'`).subscribe(data => {
      data['value'].forEach(item => {
        this.http.get(`${item.Site}/lists/?$filter=BaseTemplate eq 171`).subscribe(data => {
          const itemListObservables = data['value']
            .map(list => this.http.get(`${item.Site}/lists(guid'${list.Id}')/items`));
          zip(...itemListObservables)
            .subscribe(itemLists => {
              const totalCount = itemLists
                .map(l => l.length)
                .reduce((sum, val) => sum + val, 0)
              if (totalCount > 0) {
                this.chart.goalChartLabels.push(item.Title)
                this.chart.goalChartData.push(totalCount)
              }

              itemLists.forEach(variable => {
                variable.internalListName = list.EntityTypeName.replace("List", "");
                this.myTasks.push(variable);
              });
            });
        })
      });
    })

zip函数等待所有可观察对象发出值并返回它们的数组。

关于最佳做法：

HttpService调用至少应在ngOnInit中进行。您可能会使用输入来运行这些请求，并且它们不会在构造函数中定义。
在每个级别上使用HTTP请求进行三级嵌套循环并不是一件容易的事。考虑将其作为服务器端的单个资源。

Answer 2

您应该使用dependsOnPkgs('ggplot2') [1] "dendextend" "GGally" "ggthemes" "plotly" "viridis" "caret" "crosstalk" [8] "DT"发出所有请求，然后获得响应。

The rxjs docs link.

完成变量总计后，将项目推入数组

2 个答案: