將數據從服務傳遞到組件 - Ionic 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; 

     } 

這是我的組件調用服務：

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++){ 

     // } 

    } 

當控制檯記錄payment_data [0]我得到了一個未定義

Answer 1

它發生的異步行爲的價值。它調用該函數，然後打印控制檯。函數執行尚未完成。你必須等到數據返回。

在服務

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這裏聽服務結束事件。所以，你的數據可以從服務採取：

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

服務可能是這樣的：

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

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