控制台中的 Angular Object output '未定义'。 无法将数据输入前端

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)
}}

和我的组件 typescript：

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

实际上，在您的组件内部，您在 angular 的 ngoninit 生命周期内编写了 return function ，它不会返回任何东西

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

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

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$}`);
            });

}
}