Angular無法在數組屬性中推送http響應

Question

我正在使用httpclient從API獲取一個JSON值，該API的ID在角度6中包含ID，並且正在另一個URL中傳遞該ID以獲取將執行id.length次的每個ID的結果。 我已經聲明了一個數組屬性，並試圖將第二個http結果推入數組。 注銷結果時，可以看到結果沒有插入方括號中； json值不包含在方括號內。 請在下面的圖片中找到結果。 任何人都可以給我解決方案如何在數組屬性中正確推入值。

角服務：

    import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { Stories } from '../stories';
import { error } from 'util';
import { tap, map, catchError } from 'rxjs/operators';




@Injectable({
  providedIn: 'root'
})
export class HackerStoriesService {

  Story: Array<any> = [];
  ChildStory: Array<object> = []; 

  constructor(private http: HttpClient) { 

  }

  getStories(){
    this.http.get<Stories[]>('URL')
    .subscribe((response) => {
      this.Story = response;

      for(let i=0;i<=this.Story.length;i++){
           this.http.get('URL'+this.Story[i]+'.json')
           .subscribe((response)=> {
             this.ChildStory.push(response)
           })  

      }
      console.log(this.ChildStory)

     return this.ChildStory; 
    },
   (error) => {console.log("Error occurred" + error)},
 ()=> {console.log("The subscription is completed")});



 }


}

結果：

當我記錄結果console.log（this.ChildStory）時，得到以下結果。） https://i.stack.imgur.com/1korE.jpg [1]

Answer 1

當您調用console.log時，該變量為null，但是當您稍后在控制台中查看它時，該變量將被填充，這就是為什么您可以在其中看到值的原因。 （如前所述這里 ）

您可以在getStory（）函數中執行的操作是返回一個Observable。 它可能看起來像：

getStories() {
    return new Observable<Stories[]> ( (observer) => {
        this.http.get<Stories[]>('URL').subscribe((response) => {

            this.Story = response;
            let storiesCalls = [];
            for (let i = 0; i < this.Story.length; i++) {
                storiesCalls.push(this.http.get('URL' + this.Story[i]+'.json'));
            }

            forkJoin(storiesCalls).subscribe((childStories) => {
                observer.next(childStories);
                observer.complete();
            });

        }, (error) => {
            console.log("Error occurred" + error)
            observer.error(error);
            observer.complete();
        });
    });
}

然后，您可以在要使用檢索到的值的任何地方訂閱返回的Observable：

hackerStoriesServiceInstance.getStories().subscribe((childStories) => {
    //do stuff with childStories object
}

我沒有時間運行代碼，因此可能會有一些“錯誤”，如果您發現任何問題，請告訴我，並將更新答案。