Question

我正在尝试将数据发布到api并将数据返回到调用api的服务。此服务将数据返回到调用服务的组件。

我正在获取组件中的数据，但我无法弄清楚如何访问数据以便在html中显示它们。我以这种格式获取数据：

这是我的服务 public getPaymentDetails（loan，payment）{ 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]时，我得到值undefined

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);
      });
   });
}

将数据从服务传递到组件 - Ionic 2

2 个答案: