Как установить публичное свойство с угловым 2 при инициализации компонента

Question

У меня есть служба, которая возвращает данные, как ожидалось, при вводе в компонент. Однако, когда я подписываюсь на метод услуги и назначаю ответ публичной переменной при инициализации компонента. Переменная остается неопределенным

вот моя служба

import {Injectable} from '@angular/core'; 
import { Observable }  from 'rxjs/Observable'; 
import { Headers, Http, RequestOptions, Response } from '@angular/http'; 

// Statics 
import 'rxjs/add/observable/throw'; 

// Operators 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toArray'; 

@Injectable() 
export class DataService { 

    public errorMessage:string; 

    private URL = 'MyUrl'; 

    constructor(
    private http: Http 
){} 

    getData(token:string) :Observable<Response> 
    { 
     return this.http.get(this.URL + 'somedata?token='+token) 
       .map(response => response.json()) 
       .catch(this.ThrowError); 
    } 


    private ThrowError (error: any) 
    { 
    let errMsg = (error.message) ? error.message : 
    error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 

    private ExctractData(res:Response) 
    { 
    let body = res.json(); 
    return body.data || {}; 
    } 
} 

А вот мой компонент

import { Component, OnInit } from '@angular/core'; 


import { DataService } from '../data.service'; 
import 'rxjs/add/operator/map'; 


@Component({ 
    selector: 'app-comp', 
    templateUrl: './my.component.html', 
    styleUrls: ['./my.component.css'] 
}) 
export class MyComponent implements OnInit { 



    public DataSet:any; 

    public datasets:any; 

    constructor(
    private DataService:DataService 
) { } 

    ngOnInit() 
    { 
    this.getData(); 
    this.datasets = this.DataSet; 
    console.log(this.DataSet); //Why this returns undefined while it has been set in this.getData function? 

    } 


    getData() 
    { 

    this.DataService.getData(localStorage.getItem('token')) 
        .subscribe(
         DataSet =>this.DataSet = DataSet, 
         error => console.error('Error: ' + <any>error), 
         () => console.log('Completed!') 
        ) 
    } 

} 

Мои проблемы есть с ngOnInit(), кажется, он не может инициализировать Dataset к новым ценит любые идеи?

Answer 1

Вы видите 'undefined' в консоли из-за асинхронного характера Observable и подписки. Метод console.log выполняется до функции обратного вызова подписки. Надеюсь, это поможет

Answer 2

Это потому, что this.getData() позвонит async method. Поэтому его совершенно неизвестно, что к тому моменту данные будут возвращены. С другой стороны, this.datasets = this.DataSet; будет выполнен сразу же после выполнения строки this.getData() (which calls async method). Итак, очевидно, this.Dataset еще не пополнен данными, и поэтому он не определен.

Что вы можете сделать это,

ngOnInit() 
    { 
    this.getData(); 
    } 


    getData() 
    { 
    // this is async call and its unknown that how long this process would take to fetch data. 
    this.DataService.getData(localStorage.getItem('token')) 
        .subscribe(
         DataSet =>{  
          this.DataSet = DataSet; 
          console.log(this.DataSet) //<<<<here it will print data to the console. 
         }, 
         error => console.error('Error: ' + <any>error), 
         () => console.log('Completed!') 
        ) 
    }