角4の配列値が失われる

Question

私は、httpリクエストから返された配列を別の配列に割り当てるメソッドを持っています。問題は、メソッドが完了した後、新しい値を持つ配列が空になっているようです。

http要求を伴うメソッド。

loadBookingFullRowDataRequest(rowId: number) { 
    this.bookingFullRowData[rowId] = []; 
    this.bookingService.getAllBookingData().subscribe(res => { 
     this.bookingFullRowData = <Booking[]>res[rowId]; 
     console.log('all booking data: ', this.bookingFullRowData, 'rowId: ', rowId); 
     for (const item of this.bookingFullRowData) { 
     const itemId = `${item['title']}-rowid-${item['rowid']}-proj-${item['proj']}`; 
     this.bookingsForm.addControl(itemId, new FormControl(
      `${item['content']}` 
     )); 
     } 
    }); 
    } 

更新アレイからのデータを使用しようと

方法。

launchModal(element) { 

    const elementId = (event.target as Element).id; 
    const elementIdArray = String(elementId).split('-'); 
    this.currentRow = parseInt(elementIdArray[2], 10); 
    this.loadBookingFullRowDataRequest(this.currentRow); 
    console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow); 

    this.modalService.createModal('#bookings-form', null, this.dialogOptions); 
    } 

console.logは空の配列を出力します。

Answer 1

問題は、getAllBookingDataメソッドが非同期であることです。これは、リクエストを発行するが、すぐには応答を得ないことを意味します。

subscribeメソッドに渡す関数は、基本的に応答が返されたときに実行されるコールバック関数です。 HERE

時間内にいくつかの後の時点で実行されます -

this.bookingService.getAllBookingData().subscribe() // <内のコードがあることを意味

。

ので、この行の後のすべてのコード：

this.loadBookingFullRowDataRequest(this.currentRow); 
// Any code below here!! 
console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow); 

this.modalService.createModal('#bookings-form', null, this.dialogOptions); 

を購読するメソッドに渡された、BEFORE機能を実行します。 .toPromiseスティックを使用していない、サイドノートとして

loadBookingFullRowDataRequest(rowId: number) { 
    this.bookingFullRowData[rowId] = []; 
    this.bookingService.getAllBookingData().subscribe(res => { 
     this.bookingFullRowData = <Booking[]>res[rowId]; 
     console.log('all booking data: ', this.bookingFullRowData, 'rowId: ', rowId); 
     for (const item of this.bookingFullRowData) { 
     const itemId = `${item['title']}-rowid-${item['rowid']}-proj-${item['proj']}`; 
     this.bookingsForm.addControl(itemId, new FormControl(
      `${item['content']}` 
     )); 
     } 
     console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow); 

     this.modalService.createModal('#bookings-form', null, this.dialogOptions); 

    }); 
    } 

：

は、だからあなたの問題を解決するために、あなたはにデータがコールバック関数内で取得された後に実行するために必要なすべてのコードを移動する必要がありますObservablesと一緒に。

Answer 2

コードは待機していません。

// Launch async task in terms of subscribe 
this.loadBookingFullRowDataRequest(this.currentRow); 

// use loaded data *without waiting* 
console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow); 

あなたは後がサブスクライブデータを使用する必要が呼び出されます。以下のコメントは注意してください。もっと

使用toPromiseとthenと、チェーン

。ドキュメント：https://www.learnrxjs.io/operators/utility/topromise.html

Answer 3

サブスクライブ関数が非同期呼び出しを行っているので、呼び出しが完了した後でデータを使用していることを確認する必要があります。

3つのパラメータ/セクションがあります。返され

1. データ、いずれかが返された場合
2. エラー、

3. コールが完了した部分

   loadBookingFullRowDataRequest(rowId: number) { 
   this.bookingFullRowData[rowId] = []; 
   this.bookingService.getAllBookingData().subscribe(res => { 
       this.bookingFullRowData = <Booking[]>res[rowId]; 
       console.log('all booking data: ', this.bookingFullRowData, 'rowId: ', rowId); 
       for (const item of this.bookingFullRowData) { 
       const itemId = `${item['title']}-rowid-${item['rowid']}-proj-${item['proj']}`; 
       this.bookingsForm.addControl(itemId, new FormControl(
        `${item['content']}` 
       )); 
       } 
   },()=> {console.log(error)}, // error 
   

   （）=> //呼び出し、あなたは{aftercallのタスクを実行することができ、ここで終了しました console.log（ 'ロードされた全体のdta：'、this.bookingFullRowData、 'row：'、this.currentRow）; this.modalService.createModal（ '＃予約フォーム'、null、this.dialogOptions）}）; }