So legen Sie eine öffentliche Eigenschaft mit Winkel 2 fest, wenn eine Komponente initialisiert wird

Question

Ich habe einen Dienst, der Daten zurückgibt, wie erwartet, wenn er in eine Komponente injiziert wird. Allerdings, wenn ich die Service-Methode abonniere und die Antwort einer öffentlichen Variablen bei der Initialisierung der Komponente zuweisen. Die Variable blieb

hier undefiniert ist mein Service

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 || {}; 
    } 
} 

Und hier ist meine Komponente

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

} 

Meine Probleme mit ngOnInit() scheint es nicht den Datensatz neu initialisieren schätzt irgendwelche Ideen?

Answer 1

Sie sehen 'undefined' in der Konsole aufgrund der Async-Eigenschaft von Observable und subscribe. Die console.log-Methode wird vor der Callback-Funktion von subscribe ausgeführt. Ich hoffe es hilft

Answer 2

Das ist, weil this.getData()async method aufrufen wird. So ist es völlig unbekannt, dass bis zu welcher Zeit Daten zurückgegeben werden. Auf der anderen Seite wird this.datasets = this.DataSet; sofort nach der Ausführung der this.getData() (which calls async method) Zeile ausgeführt. Also, offensichtlich ist this.Dataset noch nicht mit Daten gefüllt und so ist es undefiniert.

Was können Sie tun, ist,

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