angular - 在其他方法中调用时变量数据不可用

Question

在我的组件中，有 3-4 个方法以及 constructor(){...} 和 ngOnInit(){...}。在类里面，我声明了一个变量 values:any=[]，它在同一个类中名为 getData() 的方法中用一些 json 数据初始化。

getData(){
  this.service.getData().subscribe(res=>{
    this.values = res.json();
  })
}

现在我在 ngOnInit(){...} 中调用了这个方法。由此我可以说 values 是用一些数据初始化的，但是如果我为了显示数据而在其他方法中调用 values 。它说空数组。

export class AccountComponent implements OnInit {

  values:any=[];

  constructor(private service: AccountService) {
  }

  getData(){
    this.service.getData().subscribe(res=>{
      this.values = res.json();
    })
  }

  callData(){
       console.log(this.values)  
   } 

  ngOnInit() {
    this.getData();
    this.callData();
  }

在 callData() 中，我有 console.log() 但这表示 values 是空的。为什么？？？

Answer 1

是的，您无法在调用服务时获取数据，即获取数据的 http 调用尚未完成。

如果您想在 callData 方法中获取数据，请像这样使用 async/await

 async getData(){
     const res =  await this.service.getData().toPromise();
      this.values = res.json();
  }

  async ngOnInit() {
    await this.getData();
    this.callData();
  }

  callData(){
       console.log(this.values)  
   } 

基本上你必须等待服务器端调用完成，现在你不是在等待服务器端调用完成，这就是你没有在 this.calllData() 方法中获取数据的原因.

或

如果你不想使用 async/await 那么你可以这样做

getData(){
    this.service.getData().subscribe(res=>{
      this.values = res.json();
      this.callData();
    })
  }

  callData(){
       console.log(this.values)  
   } 

 ngOnInit() {
    this.getData();
  }