Angular 无法在数组属性中推送 http 响应

Question

我使用 httpclient 从 API 获取一个 json 值，该值包含 angular 6 中的 ID，我将该 ID 传递到另一个 url 以获取每个 ID 的结果，该 ID 将执行 id.length 次。我已经声明了一个数组属性并尝试将第二个 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 的那一刻，该变量为空，但是当您稍后在控制台中查看它时，该变量已填充，这就是您可以在那里看到值的原因。 （如here所述）

你可以在你的 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
}

我没有时间运行代码，所以可能存在一些“错误”，如果您发现任何问题，请告诉我并更新答案。