以下のコードの実行後にsubscribeが呼び出されますか？

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") 
       ); 

     }