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()方法中获取数据的原因。

或

如果您不想进行异步/等待，那么您可以这样做

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

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

 ngOnInit() {
    this.getData();
  }

Answer 2

再添加一个我用来处理类似案例的解决方案： - 使用＆＃39; setTimeout＆＃39;功能

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

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

  ngOnInit() {
    this.getData();
    setTimeout(() => {
       this.callData();
    }, 10);
  }

这样，您可以为代码块添加最小等待时间，这取决于响应中返回的值。我使用它的值为1毫秒，它从来没有让我失望。

同样在json遍历点上，您可以直接从服务方法返回json。为了遍历该对象，而不是使用＆＃39; foreach＆＃39;你可以尝试下面的代码：

for(let key in json){
    let value = json[key];
    //rest of the code
}

希望它有所帮助！

在其他方法中调用时，可变数据不可用

2 个答案: