訂閱以下代碼執行後調用？

Question

我有一個看起來像這樣的代碼 -

ngOnInit(){ 
      console.log("ngOnInit before service call"); 
      this._blockCreditCardService.getAccountList(). 
       subscribe(
       (data)=> { 
          this.accountList=data; 
          console.log("account-list-"+this.accountList[0]) 
          console.log(this.accountList.length); 
          if(this.accountList.length>0){ 
          this.nonEmptyAccountList=true; 
          } 
          this.options=[]; 
          for (let i = 0; i < this.accountList.length; i++) { 
          this.options.push({ value: this.accountList[i], label:this.accountList[i].accountNumber}); 
          } 
       }, 
       error=> console.log("Error"), 
       ()=> console.info("Completed") 
       ); 
      this.selectedCardFromVerify=[]; 
      console.log("ngOnInit this.cardDetails-"+this.cardDetails); 
      (this.cardDetails) ? this.reSelected(this.cardDetails) : this.isAccountSelected=false; 

     } 

，其結果是

ngOnInit before service call 
capture.component.ts?dfa9:125 ngOnInit this.cardDetails-undefined 
core.es5.js?0445:3231 Angular is running in the development mode. Call enableProdMode() to enable the production mode. 
capture.component.ts?dfa9:111 account-list-[object Object] 

瀏覽器的控制檯上。我在這裏錯過了什麼。爲什麼發生這種情況。我是新來的角2，並希望有人在這裏擺脫一些光。謝謝。

Answer 1

訂閱是異步的，因此服務調用將開始，並且在訂閱正在等待數據時繼續執行其餘的功能，然後該線程在數據恢復時繼續，因此您的ngOnInit控制檯日誌首先運行，因爲服務尚未完成返回數據。

如果您希望在數據恢復後執行其餘指令，則需要在將數據分配給this.accountList = data後將它們移動到訂閱塊中。

ngOnInit(){ 
      console.log("ngOnInit before service call"); 
      this._blockCreditCardService.getAccountList(). 
       subscribe(
       (data)=> { 
          this.accountList=data; 
          console.log("account-list-"+this.accountList[0]) 
          console.log(this.accountList.length); 
          if(this.accountList.length>0){ 
          this.nonEmptyAccountList=true; 
          } 
          this.options=[]; 
          for (let i = 0; i < this.accountList.length; i++) { 
          this.options.push({ value: this.accountList[i], label:this.accountList[i].accountNumber}); 
          } 
          this.selectedCardFromVerify=[]; 
          console.log("ngOnInit this.cardDetails-"+this.cardDetails); 
          (this.cardDetails) ? this.reSelected(this.cardDetails) : this.isAccountSelected=false; 

       }, 
       error=> console.log("Error"), 
       ()=> console.info("Completed") 
       ); 

     }