Question

我在我的构造函数中写了一个get请求，如下面的

constructor(public navCtrl: NavController,
              public productServices:Products,
              public loadingCtrl: LoadingController) {

        this.productServices.getCartCount(function(data){
      console.log("checking getCartCount" +JSON.stringify(data));
      this.cartCount=data.count;
    })

    this.productServices.getWishlistCount(function(data){
      console.log("checking getWishlistCount" +JSON.stringify(data));
      this.wishlistCount = data.count;

    })

    console.log("invoking the ionviewload " +this.cartCount);

    console.log("invoking the ionviewload " +this.wishlistCount);
}

是的，我的cartCount和wishlistCount已成功更新

问题是我的constructor()运行只有在我需要它才能在视图出现时执行get请求。

所以我在这里尝试实现这个目标

ionViewDidLoad(){
    console.log("invoking the Home page ionView did load ");

    this.productServices.getCartCount(function(data){
      console.log("checking getCartCount" +JSON.stringify(data));
      this.cartCount=data.count;
    })

    this.productServices.getWishlistCount(function(data){
      console.log("checking getWishlistCount" +JSON.stringify(data));
      this.wishlistCount = data.count;

    })

    console.log("invoking the ionviewload " +this.cartCount);

    console.log("invoking the ionviewload " +this.wishlistCount);
  }

但我收到错误

EXCEPTION：无法设置未定义的属性'cartCount'

当我的视图出现时，还有其他方法可以编写获取请求。

更新：检查我的products.ts文件

getCartCount(callbackFn: (productsArray: any) => void){
      this.restService.get('/getCartCount', (data)=>{
        console.log("invoking get CartCount details");
        callbackFn(data);
      }, () => {
        callbackFn([])
      })
    }

    getWishlistCount(callbackFn: (productsArray: any) => void){
      this.restService.get('/getWishlistCount', (data)=>{
        console.log("invoking get WishlistCount details");
        callbackFn(data);
      }, () => {
        callbackFn([])
      })
    }

和rest.ts文件

get(url:string, successCallbackFn: (data: any)=>void, errorcallbackFn: ()=>void) {
      console.log("Calling " + this.configurator.restServerBaseUrl + url);
      var authdetails = ""
      if (this.tokenNeeded(url)) {
        authdetails += '&user_id=' + this.userId;
        authdetails += '&access_token=' + this.authToken;
        authdetails += "&"
      }
      this.http.get(this.configurator.restServerBaseUrl + authdetails + this.configurator.restServerControllerUrl + url).subscribe(
        result => successCallbackFn(result.json()),
        error => errorcallbackFn())
    }

Answer 1

我可以建议您的服务稍有变化吗？您可以返回get()（这是一个Observable）

而不是发送回调（并使代码难以理解/维护）

<强> rest.ts

public get(url:string) {
      console.log("Calling " + this.configurator.restServerBaseUrl + url);
      var authdetails = "";
      if (this.tokenNeeded(url)) {
        authdetails += '&user_id=' + this.userId;
        authdetails += '&access_token=' + this.authToken;
        authdetails += "&"
      }

      let fullUrl = this.configurator.restServerBaseUrl + authdetails + this.configurator.restServerControllerUrl + url;
      return this.http.get(fullUrl).map(res => res.json());
    }

<强> products.ts

public getCartCount(){
      console.log("invoking get CartCount details");
      return this.restService.get('/getCartCount');
}

public getWishlistCount(){
      console.log("invoking get WishlistCount details");
      this.restService.get('/getWishlistCount');
}

然后在您的组件代码中，您只需要subscribe结果，您将获得响应（已经解析）：

ionViewDidLoad(){
    console.log("invoking the Home page ionView did load ");

    this.productServices.getCartCount().subscribe((data) => {
      console.log("checking getCartCount" +JSON.stringify(data));
      this.cartCount=data.count;
    });

    this.productServices.getWishlistCount().subscribe((data) => {
      console.log("checking getWishlistCount" +JSON.stringify(data));
      this.wishlistCount = data.count;
    });

    console.log("invoking the ionviewload " +this.cartCount);

    console.log("invoking the ionviewload " +this.wishlistCount);
}

通过这种方式，您可以确保this关键字指向组件的实例。

EXCEPTION：无法设置未定义

1 个答案: