Typescriptは、関数の外で宣言された配列をロードしません。

Question

をhttpリクエストし、応答を解釈することを提案してください。応答には、関数内にロードされていないオブジェクトの配列とその配列が含まれます。

Notes:- making http request. 

public getRequest(): void { 
    let bdoNamesArray: BdoName[]; 
    bdoNamesArray = []; 

    this.http.get<BdoName[]>(this.bdoNamesUrl, {observe: 'response', responseType: 'json'}) 
     .subscribe((data: HttpResponse<BdoName[]>) => { 
      let vjyArray: BdoName[]; 
      vjyArray = []; 
      for (let i = 0; i < data.body.length; i++) { 
        const obj = new BdoName(); 
        obj.emplid = data.body[i].emplid; 
        obj.name = data.body[i].name; 
        vjyArray.push(obj); } 
      console.log(vjyArray); // Array loaded from http-response 
      bdoNamesArray.concat(vjyArray); // not loaded 
      }, 
     error => { 
      console.log('error on sub'); 
     }, 
     () => { 
      console.log('sub completed'); 
     } 
    ); 
    console.log(bdoNamesArray); // Emtpy array !! 
} 

Answer 1

最終的にconsole.logを実行しているときは、実行時にアレイが技術的に空であるため、配列は空です。これは、配列を操作するためのコードがの将来のある時点でで実行され、GET要求のサブスクリプションの直後ではないためです。

たとえば、あなたのコードの実行は、このようなものである：イベントがを言うことによって、データthis.http.get<BdoName[]>(this.bdoNamesUrl, {observe: 'response', responseType: 'json'})

あなたがこのイベントをサブスクライブをGETするトリガー

1. let bdoNamesArray: BdoName[]; bdoNamesArray = [];

2. いつでも自分のデータでこのイベントが戻ります次の操作を実行します。

   let vjyArray: BdoName[]; 
       vjyArray = []; 
       for (let i = 0; i < data.body.length; i++) { 
         const obj = new BdoName(); 
         obj.emplid = data.body[i].emplid; 
         obj.name = data.body[i].name; 
         vjyArray.push(obj); 
   } 
   console.log(vjyArray); 
   // ... 
   

3. それが続行し、console.log(bdoNamesArray);を実行すると、空の配列であることがわかります。いつか将来、

   ：あなたのbdoNamesArrayはロジックによって移入されあなたはあなたのコードが非同期を実行している3

のでステップに入れ、したがって、あなたはにあなたのロジックを開発する必要があります。その非同期呼び出しのコールバック内で何をしているのかを示します。

これを解決する1つの方法は、オブザーバブル自体を返し、呼び出し元に結果のロジックを決定させることです。

例（this.http.getは（）に観察を返すと仮定して）：

public getRequest(): void { 
    let bdoNamesArray: BdoName[]; 
    bdoNamesArray = []; 

    this.http.get<BdoName[]>(this.bdoNamesUrl, {observe: 'response', responseType: 'json'}) 
     .subscribe((data: HttpResponse<BdoName[]>) => { 
      doStuff(data); 
      }, 
      //... 
}