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

Posted 2023-05-09

【中文标题】angular - 对数组长度时间发出 HTTP 请求并连接对数组的响应

【英文标题】：angular - make HTTP request for array length times and concat response to array

【发布时间】：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) 因为异步

类似的问题 - ***.com/questions/45518285/…

【参考方案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。