从服务到组件的异步数据 - (从http POST返回数据)

时间:2017-03-04 09:37:57

标签: angular asynchronous typescript ionic-framework http-post

我使用了一个http POST请求将数据发送到后端并保存数据,还从后端返回了一个名为receiptNo的元素。

现在我在服务中有了receiptNo但我无法将其发送到正在调用服务的组件(无法获取从服务发送到组件的异步数据的挂起)

在组件中存在的订阅中收到以下错误:

  

财产'订阅'在' boolean'。

类型中不存在

我的组件:

   import { Component, NgZone,OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Printer, PrintOptions, Toast } from 'ionic-native';
import {LoanService} from '../../app/services/loan.service';
import {CollectionService} from '../../app/services//CollectionService';
import { CollectpaymentsPage } from '../collection/collection.component';
import { Collection}  from '../../../../common/classes/Collection';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';



@Component({
  selector: 'page-receipt',
  templateUrl: 'receipt.html'
})
export class ReceiptPage {

  base64Image: any;
  public loan: Dictionary;
  public mobile: any;
  // public form: any;
  public amount: any;
  public collection: Collection;
  public data;
  public res;

  constructor(public navCtrl: NavController,public collectionService: CollectionService, public zone: NgZone, public params: NavParams) { 
      this.loan = params.get('loan');
      this.mobile= params.get(this.mobile);
      // this.form= params.get('form');
      this.amount= params.get('amount');
      this.collection = params.get('collectionData');


   }


   ngOnInit() {
        console.log("this is receipt collectionss page")
        console.log(this.collection)
        console.log("from receipt ts")

         // XXX check for return value and errors
          // this.collectionService.saveCollection( this.collection);

          this.collectionService.saveCollection( this.collection)
                .subscribe(result => this.data = result);
}
}
interface Dictionary {
    [ index: string ]: string
}

我的服务(collectionService):

public saveCollection(  collection: Collection) {
        console.log("Collections Form data ")
        let queryParameters = new URLSearchParams();
        let headerParams = new Headers({ 'Content-Type': 'application/json' });
       var userToken = JSON.parse(localStorage.getItem('currentUser'));
       queryParameters.set('token', userToken.token );

        let requestOptions: RequestOptionsArgs = {
            method: 'POST',
            headers: headerParams,
            search: queryParameters
        };


        console.log( collection)
        var result = collection.validate()
        console.log( result)

       if( ! result["isValid"] ){
            console.log( result["message"])
            return false;

         }


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

        let headers = new Headers({ 'Content-Type': 'application/json' });
         this.http.post(url, collection , requestOptions)
            .subscribe((response: Response) => {
                console.log(response);
                let receiptNo = response.json().receiptNo;
                console.log("this is return valuevalue")
                console.log(receiptNo);
                if(receiptNo){
                    console.log("tihis is return value");
                    console.log(receiptNo)
                    return response.json();

                }
                else{
                    console.log("failedfaileffailefailed")
                    return undefined;
                }
            });



    }

2 个答案:

答案 0 :(得分:1)

好吧,这是因为退回订阅,尝试使用Promise

public saveCollection(  collection: Collection): Promise<any> {
    // code
    return return this.http.post(url, collection , requestOptions)
        .toPromise()
        .then((success: Response) => {
            return 'success'
         }, (fail: any) => {
            return 'fail'
         })

this.collectionService.saveCollection( this.collection)
.then(success => console.log(success), // 'success'
    fail => console.log(fail)) /// 'fail'`

答案 1 :(得分:0)

您在返回布尔值的函数上使用了.subscribe(),但它应该是Observable

此代码不起作用

this.collectionService.saveCollection( this.collection)
            .subscribe(result => this.data = result);