Angular 中的 ngOnInit 中未填充数据

Question

我正在调用虚拟网络 API 来填充 class 的变量以进一步使用它，但后来我遇到了一个让我感到困惑的奇怪场景：

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.

我无法理解这一点。请提出实际情况。

Answer 1

Http.get returns 一个 Observable 并且是异步的。您的请求有时间处理前 console.log 运行秒。

将你的 console.log 移到你的订阅中，因为这将运行一旦 observable 发出。

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

Answer 2

我建议您使用 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); }
}

Angular 中的 ngOnInit 中未填充数据

Data not being populated in ngOnInit in Angular

ngoninit

angular