无法在我的 Angular 4.x 应用程序的 ngOnInit() 之外访问我的 json 响应数据答案

【问题标题】：cannot access my json response data outside the ngOnInit() in my Angular 4.x app无法在我的 Angular 4.x 应用程序的 ngOnInit() 之外访问我的 json 响应数据
【发布时间】：2018-07-04 21:26:50
【问题描述】：

我有一个带有正在发送的 http 请求的 Angular 4.x 应用程序，并且我从端点取回了有效的 json（我可以在初始的 console.log 中看到） - 问题是我看不到这些数据在我有 console.log 的 ngOnInit() 外面

谁能提出问题所在？

export class SidebarComponent implements OnInit {

  constructor(private http: HttpClient, private userService: UserService) { }

   ngOnInit() {

    this.http.get('https://dev.myapp.com/api/angularfour/auth',
        { params: new HttpParams()
            .set('token', this.userService.getAuth().__token)
            .set('apiversion', '1')
            .set('appid', this.userService.getAuth().appid) })
        .subscribe(data => {
            console.log('data', data); // can see this data
        });
    }

console.log('menu data outside init', data); // cannot see this data?

【问题讨论】：

标签： angular ngoninit

【解决方案1】：

在您的示例中，请注意变量的范围；数据只存在于 subscribe 方法中，你需要在你的类中定义一个全局变量，例如：

在导出类下添加：

mydata : any;

在您的订阅方法中：

this.mydata = data;

所以你可以在方法之外访问数据：

console.log('menu data outside init', this.mydata);

【讨论】：

【解决方案2】：

如果您想在ngOnInit 块之外访问组件，则需要在组件上设置一个属性。现在，您的 data 变量的作用域是您的 ngOnInit 方法中的 subscribe 块。

试试这样的：

export class SidebarComponent implements OnInit {

constructor(private http: HttpClient, private userService: UserService) { }

data: any; // property for data

ngOnInit() {

this.http.get('https://dev.myapp.com/api/angularfour/auth',
    { params: new HttpParams()
        .set('token', this.userService.getAuth().__token)
        .set('apiversion', '1')
        .set('appid', this.userService.getAuth().appid) })
    .subscribe(data => {
        this.data = data; // save the most recent data in the data property
        console.log('data', data); // can see this data
    });
}

console.log('menu data outside init', this.data); // your data

【讨论】：

【解决方案3】：

export class SidebarComponent implements OnInit {
   myData:any;

  constructor(private http: HttpClient, private userService: UserService) { }

   ngOnInit() {

    this.http.get('https://dev.myapp.com/api/angularfour/auth',
        { params: new HttpParams()
            .set('token', this.userService.getAuth().__token)
            .set('apiversion', '1')
            .set('appid', this.userService.getAuth().appid) })
        .subscribe(data => {
            console.log('data', data); // can see this data
            this.myData=data;
        });
    }

   buttonClick(){
     console.log('menu data outside init',  this.myData); 
     // this will only work after the async call has finished
    }
}

【讨论】：