CODEWITHSUNDEEP
angularvisual-studio-2015rxjs
VR1256
VR1256

Reputation: 1450

Component variables inside a RxJS subscribe() function are undefined

Variables inside subscribe are undefined but when I put breakpoint before hitting service subscribe I have the variable defined.

In Service:

getCashierRiskProfiles(): Observable<ICashierRiskProfile[]> {
  return this.http.get(this._baseUrl + "src/HTTPJson/cashierriskprofile.json")
    .map((res: Response) => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}

In Component:

import { Component, OnInit } from "@angular/core";
import { Observable } from 'rxjs/Observable';

import { CashierRiskProfileService } from "./cashierriskprofile.service";
import { ICashierRiskProfile } from "../shared/interfaces";

@Component({
  selector: "cashierriskprofile",
  templateUrl: "../src/app/cashierriskprofile/cashierriskprofile.component.html"
})
export class CashierRiskProfileComponent implements OnInit {
  filterText: string;
  cashierRiskProfiles: ICashierRiskProfile[];

  constructor(
    private sorter: Sorter,
    private service: CashierRiskProfileService
  ) { }

  ngOnInit() {
    this.filterText = "Filter Exceptions:";
    //// Observable technique
    this.service.getCashierRiskProfiles()
      .subscribe(
        (riskProfiles) => {
          this.cashierRiskProfiles = riskProfiles;
          this.filterText = "Inside Subscribe:";
        },
        err => {
          // Log errors if any
          console.log(err);
        }
      );
  }
}

In above component code inside ngonInit() service call, this.cashierRiskProfiles inside the subscribe is undefined, but after I put breakpoint before the service callI have that variable available and defined.

I have seen lot of people having this issue with component variables with this.variablename getting undefined inside subscribe. When you notice this.filterText I can get the values assigned to it outside dataservice call, but when I put breakpoint inside subscribe, this.filterText is undefined and I don't know how I am losing it.

What's going on?

Upvotes: 4

Views: 9912

Answers (3)

Simon Sinnott
Simon Sinnott

Reputation: 1

Try passing your local variable into the function as follows:

ngOnInit() {
    this.populateCashierRiskProfiles(this.cashierRiskProfiles);
}

populateCashierRiskProfiles(crp: ICashierRiskProfile[]) {
    //// Observable technique
    this.service.getCashierRiskProfiles()
        .subscribe((riskProfiles) => {
            crp = riskProfiles
        });
}

Your cashierRiskProfiles should now be populated with the updated riskProfiles.

Upvotes: 0

Tomasz Iz
Tomasz Iz

Reputation: 195

I guess it's because during runtime this inside subscribe is SafeSubscribe, not your component.

use closure to call component method, like this:

populateCashierRiskProfiles() {
    const that = this;
    //// Observable technique
    this.service.getCashierRiskProfiles()
        .subscribe((riskProfiles) => {
            that.cashierRiskProfiles = riskProfiles
        });
}

Upvotes: 6

Narendra CM
Narendra CM

Reputation: 1426

Your code looks good to me. I'm following the same approach in my project and working fine for me

anyways you can try the following and let me know if it works fine

ngOnInit() {
    this.filterText = "Filter Exceptions:";
    this.populateCashierRiskProfiles();
}

populateCashierRiskProfiles() {
    //// Observable technique
    this.service.getCashierRiskProfiles()
        .subscribe((riskProfiles) => {
            this.cashierRiskProfiles = riskProfiles
        });

}

Upvotes: -1

Related Questions