サービスからコンポーネントにデータを渡す - イオン2

Question

私はAPIにデータをポストし、APIを呼び出したサービスにデータを返そうとしています。このサービスは、サービスを呼び出したコンポーネントにデータを返します。

コンポーネント内のデータを取得していますが、htmlに表示するためにデータにアクセスする方法を理解できませんでした。私は、この形式でデータを取得しています：

これは 公共getPaymentDetails（ローン、支払い）{ はconsole.log（ "到達支払詳細"）私のサービスです。

  let queryParameters = new URLSearchParams(); 
      let headerParams = new Headers({ 'Content-Type': 'application/json' }); 
      let requestOptions: RequestOptionsArgs = { 
       method: 'POST', 
       headers: headerParams, 
       search: queryParameters 
      }; 


      const url = this.basePath + '/api/v1/collection/payment'; 


      // let headers = new Headers({ 'Content-Type': 'application/json' }); 
      this.http.post(url, {loan,payment} , requestOptions) 
       .subscribe(data => { 
        // console.log(data); 
        this.return_data.push(data.json()); 
       }, 
       data => { 
        // console.log(data); 
       }); 
       return this.return_data; 

     } 

これは、サービスを呼び出す私のコンポーネントです：コンソールがpayment_dataにログインする場合は[0]私はそれが非同期動作のために発生している

Answer 1

を未定義の値を取得

getPaymentDetails(): void { 
     //will need a separate api 
     console.log("hi get payment details") 

     this.payment_data = this.collectionService.getPaymentDetails(this.loan,this.amountForm.value["payment"]); 

     console.log(this.payment_data) 
     // for(var i=0;i<=payment_data.length;i++){ 

     // } 

    } 

。それは関数を呼び出し、コンソールを印刷します。関数の実行はまだ完了していません。データが返るまで待たなければなりません。

あなたのサービスで

let queryParameters = new URLSearchParams(); 
    let headerParams = new Headers({ 'Content-Type': 'application/json' }); 
    let requestOptions: RequestOptionsArgs = { 
     method: 'POST', 
     headers: headerParams, 
     search: queryParameters 
    }; 

    const url = this.basePath + '/api/v1/collection/payment'; 

    // let headers = new Headers({ 'Content-Type': 'application/json' }); 
    return this.http.post(url, { loan, payment }, requestOptions); 

あなたのコンポーネントで

getPaymentDetails(): void { 
     //will need a separate api 
     console.log("hi get payment details") 

     this.payment_data = this.collectionService.getPaymentDetails(this.loan,this.amountForm.value["payment"]).subscribe(// do your logic here); 
    } 

あなたは、データを表示するために表を使用することができます。

@Component({ 
    moduleId: module.id, 
    selector: "test-component", 
    styles: [], 
    template: `<div clss="row"> 
       <table class="table table-bordered"> 
        <tr> 
         <th>CBC_DUE</th> 
         <th>CURRENT_MONTH_INSTLAMENT</th> 
         <th>LPP</th> 
         <th>TOTAL_DUE</th> 

        </tr> 
        <tr *ngFor="let item of payment_data; let i=index"> 
         <td>{{item?.CBC_DUE}}</td> 
         <td>{{item?.CURRENT_MONTH_INSTLAMENT}}</td> 
         <td>{{item?.LPP}}</td> 
         <td>{{item?.TOTAL_DUE}}</td> 
        </tr> 
       </table> 
      </div>`, 

}) 

Answer 2

ここでObserverを使用して、サービス終了イベントを聞くことができます。だからあなたのデータは、サービスから撮影することができます。

public getPaymentDetails(loan,payment) { 
    return new Observable(observer => { 
     ... 

     this.http.post(url, {loan,payment} , requestOptions).subscribe(data => { 
     ... 
     return observer.next(data); 
     }); 
    }); 
} 

：

this.collectionService.getPaymentDetails(...).subscribe(data => this.payment_data = data); 

あなたのサービスかもしれないがのように見えます