Angular 的 ngOnInit 中未填充数据

Posted 2023-03-13

【中文标题】Angular 的 ngOnInit 中未填充数据

【英文标题】：Data not being populated in ngOnInit in Angular

【发布时间】：2019-11-12 22:25:00

【问题描述】：

我正在调用一个虚拟 Web 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。

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

【问题讨论】：

何时未定义。也尝试使用console.log 而不是alert 来调试你的代码

How do I return the response from an Observable/http/async call in angular?的可能重复

我试过 console.log 但它给了我 console.log(this.data) 如果我不使用 alert("beforeConsole") 给我 undefined;

试试这个...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); );

Unable to load data inside ngOnInit的可能重复

【参考方案1】：

Http.get 返回一个 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;
   );

【讨论】：

这里已经有足够多的此类问题的答案了。请考虑将其标记为重复，而不是回答问题。这将有助于减少 *** 的污染。谢谢:)

【参考方案2】：

我建议你使用异步等待。

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