将数据从服务传递到组件 - 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); 
     }); 
    }); 
}