angular - variabeldata inte tillgänglig när den anropas i en annan metod

I min komponent finns det 3-4 metoder tillsammans med constructor(){...} och ngOnInit(){...}. I klassen har jag deklarerat en variabel values:any=[] som initieras med några JSON-data i en metod som heter getData() i samma klass.

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

nu kallade jag denna metod i ngOnInit(){...}. Därifrån kan jag säga att values är initierad med viss data men om jag kallar values i en annan metod för att visa data. Det säger tom array.

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

I callData() har jag console.log() men detta säger att values är tomt. Varför???

Svar #1

ja, du kan inte få data där eftersom du anropar en tjänst, dvs. HTTP-anropet för att få data är ännu inte slutfört.

om du vill hämta data i callData-metoden, använd async/await så här

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

I princip måste du vänta på att serversidans anrop ska slutföras, just nu väntar du inte på att serversidans anrop ska slutföras och det är anledningen till att du inte får data i din this.calllData()-metod.

eller

om du inte vill använda async/await så kan du göra så här

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

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

 ngOnInit() {
    this.getData();
  }

Svar #2

Lägger till en lösning till som jag använde för att hantera liknande fall: använda 'setTimeout'-funktionen.

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

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

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

På det här sättet kan du lägga till en minimal väntetid till kodblocket som beror på värden som returneras i svaret. Jag använde det med värdet 1 millisekund och det har aldrig misslyckats för mig.

Även när det gäller json-traversering, kan du returnera json direkt från servicemetoden. För att traversera det objektet, istället för att använda 'foreach', kan du prova nedanstående kod:

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

Hoppas det hjälper!