RxJS subscribe() 函数内的组件变量未定义

Question

订阅中的变量未定义，但是当我在点击服务订阅之前放置断点时，我定义了变量。

服务中：

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

在组件中：

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

在ngonInit() 服务调用中的上述组件代码中，订阅中的this.cashierRiskProfiles 未定义，但是在我在服务调用之前放置断点之后，我使该变量可用并已定义。

我已经看到很多人在组件变量中遇到这个问题，而 this.variablename 在 subscribe 中变得未定义。当您注意到 this.filterText 时，我可以在 dataservice 调用之外获取分配给它的值，但是当我在 subscribe 内放置断点时， this.filterText 是未定义的，我不知道我是如何丢失它的。

这是怎么回事？

Answer 1

我想这是因为在运行时这个内部订阅是 SafeSubscribe，而不是你的组件。

使用闭包调用组件方法，如下所示：

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