angular-發出HTTP請求以獲取數組長度時間並響應數組

Question

我是新手。 我正在使用trello API。 我有一個數組，其中有一些列表ID。 我想讓HTTP獲取列表ID數組長度時間的調用。 在示例中，我有兩個ID，因此HTTP調用應進行兩次。 我在每個http請求中獲得卡片（對象數組）作為響應。 我想在一個數組中合並或推送響應。 作為下面的示例，我將數據推送到taskArray，但它不存儲任何內容。

首次調用返回-數據（3）[{…}，{…}，{…}]

首次調用返回-數據（7）[{…}，{…}，{…}，{…}，{…}，{…}，{…}]

串聯后的預期輸出是-數據（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!')
      })
    )
}

Answer 1

我不太確定，但是您正在從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。

Answer 2

為了進一步解釋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);
}