angular - 对数组长度时间发出 HTTP 请求并连接对数组的响应答案

【问题标题】：angular - make HTTP request for array length times and concat response to arrayangular - 对数组长度时间发出 HTTP 请求并连接对数组的响应
【发布时间】：2019-08-04 14:16:09
【问题描述】：

我是 Angular 的新手。我正在使用 trello API。我有一个数组，其中有一些列表 ID。我想让 HTTP 获取列表 ID 数组长度时间的调用。在示例中，我有两个 ID，因此 HTTP 调用应该进行两次。我在每个 http 请求中得到卡片（对象数组）作为响应。我想在一个数组中连接或推送响应。作为下面的示例，我将数据推送到 taskArray 但它不存储任何内容。

第一次调用它返回 - 数据 (3) [{…}, {…}, {…}]

首先调用它返回 - 数据 (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

连接后的预期输出是 - data (10) [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {…}]

当前输出是-数据[]

//component.ts

public listArr = ['5c78bebad10c40163a4f8fc6', '5c7cf40cb8f22b26862602aa'];
public taskArr = [];

ngOnInit() {
  for (var i = 0; i < this.listArr.length; i++) {
    let apiUrl = 'lists/' + this.listArr[i] + '/cards?key=12345688888888&token=b65ss88rhsnjj78925556dkjsagfsv';
    this._service.trelloCall(apiUrl)

      .subscribe(
        data => {
          this.taskArr.push(data)
        }
      }

    console.log('taskArr', this.taskArr)
  }
}

//service.ts

public trelloUrl = 'https://api.trello.com/1/';

trelloCall(apiUrl) {
  return this.http.get < any > (this.trelloUrl + apiUrl)
    .pipe(
      map(data => {
        return data;
      }),
      catchError(error => {
        return throwError('Something went wrong!')
      })
    )
}

【问题讨论】：

试试this.taskArr = this.taskArr.concat(data);？另外，在这里做控制台日志：data => {this.taskArr.push(data)} 因为异步
类似的问题 - stackoverflow.com/questions/45518285/…

标签： javascript jquery arrays angular for-loop

【解决方案1】：

为了扩展 John 的评论，这不起作用的原因是 .push 用于将单个值推送到数组中。相反，您想使用.concat，因为它用于组合两个数组。

例如，

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
//alphaNumeric => [a,b,c,1,2,3]

在您的代码中，您应该希望 concat 将 http 的结果发送到您的 taskArr。您也不需要通过管道传输您的 http 结果并对其进行映射。假设你使用HttpClient，它已经返回了一个可观察对象。

//component.ts
ngOnInit() {
  this.listArr.forEach( url => {
    let apiUrl = 'lists/' + url + '/cards?key=12345688888888&token=b65ss88rhsnjj78925556dkjsagfsv';
    this._service.trelloCall(apiUrl).subscribe(data => this.taskArr.concat(data));
  });
}

//service.ts
trelloCall(apiUrl) {
  return this.http.get(this.trelloUrl + apiUrl);
}

【讨论】：

【解决方案2】：

我不太确定，但您正在从 service.ts trelloCall() 返回管道，然后您尝试订阅它。你确定管道的结果返回 Observable 吗？

我用过这样的服务；

public getSchool() // service.ts
      {
       var url = this.gp.getApiUrl()+"/getEnabledSchool"
        return this.http.get(url);
      }

调用此服务；

this.sp.getSchool().map((res:any)=> { // getting exact data from response
      let results = [];
      if(res.value == "SUCCESSFUL"){
        res.data['schoolList'].forEach(item =>{
          results.push({schoolName: item.schoolName, schoolId: item.schoolId})
        });
      }
      return results;
    })
    .subscribe(dat =>{
      this.school_list = dat;
    })

您可以使用 .subscribe 获取结果，但如果您想像我一样处理它，您可以使用 .map

在我的代码中，我得到的结果是 .subscribe 中的 dat。

【讨论】：