Json 处理服务响应，但返回未定义的

模型组件：

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Model } from '../model';
import { EdmundsAPIService } from '../edmunds-api.service';
import {  ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-models',
  templateUrl: './models.component.html',
  styleUrls: ['./models.component.css']
})
export class ModelsComponent implements OnInit, AfterContentInit {
public models: Model[];
errorMessage: string;

  constructor(private route: ActivatedRoute,
              private _EdmundsAPIService: EdmundsAPIService) {}

  getModels(): void {
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ])
      .subscribe(
       models => this.models = models,
       error =>  this.errorMessage = <any>error);
     }

  ngOnInit() {
    this.getModels();
    console.log(this.models);
  }

从'@angular/core'导入{Component，OnInit，AfterContentInit}；
从“../Model”导入{Model}；
从“../edmunds api.service”导入{EdmundsAPIService}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：'应用程序模型'，
templateUrl:'./models.component.html'，
样式URL:['./models.component.css']
})
导出类ModelsComponent实现OnInit，AfterContentInit{
公共模型：模型[]；
错误消息：字符串；
构造函数（专用路由：ActivatedRoute，
私人{U EdmundsAPIService:EdmundsAPIService{}
getModels（）：void{
this._EdmundsAPIService.getModels（this.route.snapshot.params['data']）
.订阅(
models=>this.models=models，
error=>this.errorMessage=error）；
}
恩戈尼尼特（）{
这个.getModels（）；
log（this.models）；
}

EdmundsAPIService：

  getModels(makeNiceName: number): Observable<Model[]> {
    return this.http.get('REDACTED')
    .map(res => res.json())
    .catch(this.handleError);
  }

getModels（makeNiceName:number）：可观察{
返回此.http.get（'REDACTED'）
.map（res=>res.json（））
.接住（这个.把手错误）；
}

---

我正在尝试访问ngOnInit（或其他生命周期挂钩）中的“this.models”，以便对JSON响应进行排序和筛选。但是，我的

console.log

返回

未定义的
这是一个异步调用，在您尝试
console.log
结果时，尚未检索到数据

  ngOnInit() {
    this.getModels(); // executing
    // logging before above function has finished executing
    console.log(this.models);
  }

如果要在订阅中移动
console.log
，请确保具有以下值：

  getModels(): void {
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ])
      .subscribe(
       models =>  {
         this.models = models; // values set
         console.log(this.models); // values available!
       });
     }

这是一个异步调用，当您尝试
console.log
结果时，尚未检索到数据

  ngOnInit() {
    this.getModels(); // executing
    // logging before above function has finished executing
    console.log(this.models);
  }

如果要在订阅中移动
console.log
，请确保具有以下值：

  getModels(): void {
    this._EdmundsAPIService.getModels(this.route.snapshot.params[ 'data' ])
      .subscribe(
       models =>  {
         this.models = models; // values set
         console.log(this.models); // values available!
       });
     }

我确信我有这些值，这不是问题所在。console.log是一个用于检索值的“测试函数”。我试图做的是获取JSON响应->将其放入models对象中，我可以在组件中对其进行排序、筛选和操作。换句话说，就像我们可以访问{{data}JSON}在html模板中，我想在我的ts组件中操作它。也许我不能在组件中操作它，这很好，我不介意将它存储在我的html模板中并进行纯javascript JSON操作。当然，你可以在组件中操作它。你需要立即做些什么，还是只想在视图中呈现它作为开始ing point？JSON响应带有一个嵌套在模型对象中的子对象中的“categories”属性。理想情况下，如果我可以在我的组件中操作它，我希望将此异步响应存储在一个变量中（最好是models:model[]——我通过类定义的对象）使用“models”，我想使用嵌套for循环仔细地遍历数组。通过提取categories属性并将其放置在未筛选的数组中，我计划按唯一性筛选它（没有重复！），然后使用这个新的过滤数组，我计划使用*ngFor来构建按钮。我确信我有值，这不是问题。console.log是一个“测试函数”来检索值。我试图做的是获取JSON响应->将其放入模型对象中，我可以在我的组件中对其进行排序、过滤和操作。换句话说，就像我们可以访问{data | json}在html模板中，我想在我的ts组件中操作它。也许我不能在组件中操作它，这很好，我不介意将它存储在我的html模板中并进行纯javascript JSON操作。当然，你可以在组件中操作它。你需要立即做些什么，还是只想在视图中呈现它作为开始ing point？JSON响应带有一个嵌套在模型对象中的子对象中的“categories”属性。理想情况下，如果我可以在我的组件中操作它，我希望将此异步响应存储在一个变量中（最好是models:model[]——我通过类定义的对象）使用“models”，我想使用嵌套for循环仔细地遍历数组。通过提取categories属性并将其放置在未筛选的数组中，我计划按唯一性筛选它（没有重复！），然后使用这个新的过滤数组，我计划使用*ngFor来构建按钮。我试图添加下面的
console.log
：`for（vari=0；this.models.models.length；I++）{console.log（this.models.models[I]）；}`我遇到了错误我试图添加下面的
console.log
：`for（vari=0；this.models.models.length；i++）{console.log（this.models.models[i]）；}`我遇到了错误