For循環無法正常工作（Angular2）

Question

我想知道爲什麼我會在Angular2 (TypeScript)中使用For循環得到奇怪的行爲。我做了這個循環

loadAllQuestions() { 

      this.questionService.loadAllQuestions() 
       .map(res=>res.json()) 
       .subscribe(res=>{ 
        this.listQuestion = res.questions; 
        for (var q in this.listQuestion){ 
         this.propositionService.findPropositionByQuestion(this.listQuestion[q].wordingQ) 
          .map(res=>res.json()) 
          .subscribe(res=>{ 
           console.log(this.listQuestion[q]); 
          }); 
        } 
      }); 
    } 

所以，每Question（在listQuestion）我叫使用它的措辭（wordingQ）服務將找到這個問題的所有命題（findPropositionByQuestion）;問題是，它似乎循環不工作，當使console.log(this.listQuestion[q])它只展示listQuestion中的最後一個問題與listQuestion中索引的數目一樣多（所以如果我有3個問題，它顯示我最後一個問題3次等等。）。 詳細闡釋：在這裏，我有2個問題加載：

這裏什麼的console.log是我展示：

任何幫助嗎？

Answer 1

你需要一個額外的方法來分割你的代碼：

loadAllQuestions() { 
    this.questionService.loadAllQuestions() 
    .map(res => res.json()) 
    .subscribe(res => { 
     this.listQuestion = res.questions; 
     for (var q in this.listQuestion) { 
     this.findProposition(this.listQuestion[q]); 
     } 
    }; 
} 

findProposition(question) {       
    this.propositionService.findPropositionByQuestion(
    question.wordingQ) 
     .map(res => res.json()) 
     .subscribe(res => { 
     console.log(question); 
     console.log(res); 
     }); 
} 

這個問題可以幫助你理解爲什麼你有幾次跟蹤顯示相同的元素：

• JavaScript closure inside loops – simple practical example

Answer 2

我建議你試試for (var q of this.listQuestion){...}而不是for (var q in this.listQuestion){...}

Answer 3

您可以使用let關鍵字使q變量塊作用域。

for (let q in this.listQuestion){ //var --> let 
    this.propositionService 
     .findPropositionByQuestion(this.listQuestion[q].wordingQ) 
     .map(res=>res.json()) 
     .subscribe(res=>{ 
      console.log(this.listQuestion[q]); 
     }); 
}