控制台中的角度对象输出'undefined'。无法将数据放入前端

Question

这里是我从alphaAdvantage api端点之一获得的Json：

    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "CEF",
        "3. Last Refreshed": "2020-05-15",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-05-15": {
            "1. open": "16.0200",
            "2. high": "16.1600",
            "3. low": "15.9900",
            "4. close": "16.1600",
            "5. volume": "1765403"
        },
        "2020-05-14": {
            "1. open": "15.7300",
            "2. high": "15.8700",
            "3. low": "15.7300",
            "4. close": "15.8700",
            "5. volume": "1125986"
        }
}

我相信我已经设置了保存此数据所需的所有接口：

ITimeSeriesDaily{
    meta: Array<IMeta>;
    timeSeries: Array<ITimeSeries>;}
IMeta{ information: string; etc. }
ITimeSeries{ date: Array<IDate>; }
IDate{ open: number; etc }

这是我的数据服务：

export class StockService{
private stockUrl = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=CEF&apikey=demo';
    constructor(private _http: HttpClient) {}
    getStocks(): Observable<ITimeSeriesDaily[]>{
        return this._http.get<ITimeSeriesDaily[]>(this.stockUrl)
}}

和我的组件打字稿：

export class FirstToolComponent implements OnInit {
timeSeriesDaily$: ITimeSeriesDaily[];
constructor(private  stockService: StockService){}
ngOnInit() {
    return this.stockService.getStocks()
      .subscribe(data => this.timeSeriesDaily$ = data),
      console.log(`HELLOO ${this.timeSeriesDaily$}`);
  };
}

在控制台中，日志输出'HELLOO undefined'，我无法像这样插入我的html模板中的任何内容：

<div *ngFor='let timeSeriesDaily of timeSeriesDaily$'>
    <p>{{ timeSeriesDaily.meta }}</p>
</div>

据我所知，它已经编译了所有必要的东西。我是否必须在Json中定义嵌套对象？我在网上没有找到很多例子的运气。感谢所有阅读本文的人！

Answer 1

实际上，在组件内部，您在ngoninit生命周期的某个角度内编写了一个返回函数，不会返回任何内容

您从HTTP调用收到的响应本质上是异步的。甚至在您从HTTP请求获得实际响应之前，控制台就会执行，这将导致控制台中未定义的打印。

如果您有兴趣检查从HTTP请求收到的响应是什么，则应在订阅函数本身内部添加控制台日志

export class FirstToolComponent implements OnInit {
timeSeriesDaily$: ITimeSeriesDaily[];
constructor(private  stockService: StockService){}
ngOnInit() {
   this.getStocks();
}
getStocks() {
 this.stockService.getStocks()
      .subscribe(data => {
             this.timeSeriesDaily$ = data;
             console.log(`HELLOO ${this.timeSeriesDaily$}`);
            });

}
}