Verwenden von HTTP zum Abrufen von Daten in Angular2

Question

Ich erhalte einen Fehler nach der Verwendung einer Eigenschaft, die mit HTTP-Service festgelegt wird. Unten ist mein Code:

ngOnChanges(changes: any){ 
    // this.queslist = this.quizdalservice.getQuizQuestions(this.name); 
    this.quizdalservice.getQuizQuestions(this.name).then(mcquiz => this.queslist = mcquiz); 
    console.log('hi'); 
    for(let ques of this.queslist) 
    { 
     this.max_score +=ques.score; 
    } 
} 

Ich bekomme Fehler, der wie liest mit Länge auf eine undefinierte Eigenschaft liest. Ich nehme an, es liegt an der for-Schleife, da der Dienst Promise verwendet, um Daten zurückzugeben.

return this.http.get(this.quizquestionUrl) 
      .toPromise() 
      .then(response => response.json().data as mcquestion[]) 
      .catch(this.handleError); 

Bitte schlagen Sie vor, wie Sie vorgehen. Ich möchte die maximalen Markierungen setzen, sobald Fragen geladen sind, und es sollte in ngOnChanges-Methode erfolgen.

Answer 1

ngOnChanges(changes: any){ 
    // this.queslist = this.quizdalservice.getQuizQuestions(this.name); 
    this.quizdalservice.getQuizQuestions(this.name) 
     .then(mcquiz => { 

         this.queslist = mcquiz; 

         console.log('hi'); 
         for(let ques of this.queslist) 
         { 
          this.max_score +=ques.score; 
         } 

     }); 

} 

Answer 2

this.quizdalservice.getQuizQuestions(this.name).then(mcquiz => this.queslist = mcquiz); 
    console.log('hi'); 
    for(let ques of this.queslist) //data has not arrieved yet 
    { 
     this.max_score +=ques.score; 
    } 

Verschieben Schleife dann Rückruf an!

this.quizdalservice.getQuizQuestions(this.name).then(mcquiz => { 
    this.queslist = mcquiz 
    for(let ques of this.queslist)//data has arrieved 
    { 
     this.max_score +=ques.score; 
    } 
}); 
console.log('hi');