Данные не заполняются в ngOnInit в Angular

Я вызываю фиктивный веб-API, чтобы заполнить переменную класса, чтобы использовать ее дальше, но затем я натолкнулся на странный сценарий, который меня смущает:

export class myClass implements OnInit{ 
    data : any;    
    constructor (private http:HttpClient){}
    ngOnInit(){  
        this.http.get("http://dummy.restapiexample.com/api/v1/employee/82342").subscribe(e=>this.data = e);
        alert("beforeConsole");        
        console.log(this.data);
        var size = Object.keys(this.data).length;
        alert(size); 
    }
}

Переменные данные заполняются только тогда, когда я использую alert (просто для проверки). ЕСЛИ я удалю alert("beforeConsole");, тогда консоль выдаст мне undefined.

Я не могу этого понять. Пожалуйста, подскажите, что на самом деле происходит.


angular ngoninit
person Mamta    schedule 02.07.2019    source источник
comment
Когда получится undefined. Также попробуйте использовать console.log, а не alert для отладки кода.   -  person Tony Ngo    schedule 02.07.2019
comment
Возможный дубликат https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular   -  person Vikas    schedule 02.07.2019
comment
Я пробовал console.log, но он дает мне как console.log (this.data) дает мне undefined, если я не использую alert (beforeConsole);   -  person Mamta    schedule 02.07.2019
comment
попробуйте это ... ngOnInit(){ this.http.get("http://dummy.restapiexample.com/api/v1/employee/82342").subscribe( e=> {this.data = e; alert("beforeConsole"); console.log(this.data); var size = Object.keys(this.data).length; } () => {alert(size);} ); }   -  person Akber Iqbal    schedule 02.07.2019
comment
Возможный дубликат Невозможно загрузить данные внутри ngOnInit   -  person SiddAjmera    schedule 02.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Http.get возвращает Observable и является асинхронным. Ваш console.log запускается до того, как запрос успеет обработать.

Переместите свой console.log в свою подписку, так как он будет запускаться после того, как будет выпущен наблюдаемый.

this.http.get("http://dummy.restapiexample.com/api/v1/employee/82342")
   .subscribe(e => { 
     this.data = e;
     console.log(this.data);
     var size = Object.keys(this.data).length;
   });
person Florian Bastianelli    schedule 02.07.2019
comment
Ответов на такие вопросы уже здесь достаточно. Вместо того, чтобы отвечать на вопрос, отметьте его как повторяющийся. Это поможет сделать StackOverflow менее загрязненным. Спасибо :) - person SiddAjmera; 02.07.2019

arrow_upward
-1
arrow_downward

Предлагаю Вам использовать async await.

ngOnInit(): void { this.initialize(); }

async initialize(): Promise<void> {
  try {
    this.data = await this.http.get("http://dummy.restapiexample.com/api/v1/employee/82342").toPromise();
    console.log(this.data);
  } catch (e) { console.error(e); }
}
person TintinSansYeux    schedule 02.07.2019