Component variables inside a RxJS subscribe() function are undefined

Question

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?

Answer 1

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