javascript - angular - 对数组长度时间进行 HTTP 请求并对数组进行 concat 响应

Question

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

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

第一次调用返回 - 数据 (7) [{...}, {...}, {...}, {...}, {...}, {...}, {...}]

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

当前输出是-数据[]

//组件.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)
  }
}

//服务.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!')
      })
    )
}

Answer 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]

在您的代码中，您应该希望将 http 的结果concat 到您的 taskArr。您也不需要通过管道传输您的 http 结果并将其映射。它已经返回一个 observable，假设您使用的是 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);
}