RxJS subscribe() 函数中的组件变量未定义答案

【问题标题】：Component variables inside a RxJS subscribe() function are undefinedRxJS subscribe() 函数中的组件变量未定义
【发布时间】：2016-10-06 15:08:12
【问题描述】：

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

服务中：

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 在订阅中未定义。当您注意到 this.filterText 时，我可以在 dataservice 调用之外获取分配给它的值，但是当我在 subscribe 中放置断点时，this.filterText 是未定义的，我不知道我是如何丢失它的。

发生了什么事？

【问题讨论】：

它与范围有关。您可以做的一件事是将结果 (riskProfiles) 传递给私有方法并处理您需要的任何逻辑。像.subscribe((riskProfiles) => this.methodToProcessResponse(riskProfiles)) 这样的东西。然后在methodToProcessResponse()方法中做任何你需要做的事情。
@DaveV 谢谢，但是是否有必要做所有额外的工作来添加一个将数据分配给变量的方法？它曾经工作得很好，直到我更新了 angular 和 rxjs 版本之后它开始打破。这是添加额外方法的唯一解决方法，或者我们可以在代码中执行任何实际修复以使该变量在订阅中可用。
@DaveV 即使在我尝试使用你提到的那个方法之后，我仍然看到数据没有绑定到我的 UI，它没有等到对象可以绑定到 UI，就像承诺等到对象可用，然后绑定到 UI，observables 无法正常工作，并且组件变量在订阅中无法访问。
你找到解决这个@VijenderReddyChintalapudi的方法了吗
@Anshul 我将 console.log 放入 subscribe 以查看值，而不是放置断点和调试

标签： angular visual-studio-2015 rxjs

【解决方案1】：

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

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

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

【讨论】：

不。这行不通。在 Angular 中，在幕后（在 js 文件中），“this”的范围得到了处理。如果看生成的js文件，里面有一条语句——var _this = this
我发现它们在 vscode 调试器中显示为未定义，但在 chrome 调试器中却没有，而且它们实际上并不是未定义的，我可以引用它们并且没有空异常。执行上述操作似乎有助于调试器在那里显示正确的值

【解决方案2】：

尝试将局部变量传递给函数，如下所示：

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

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

您的 cashierRiskProfiles 现在应该使用更新后的 riskProfiles 填充。

【讨论】：

【解决方案3】：

您的代码对我来说看起来不错。我在我的项目中采用相同的方法并且对我来说工作正常

不管怎样，你可以试试下面的方法，如果它工作正常，请告诉我

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

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

}

【讨论】：

谢谢，在 subscribe 里面我什至试图放一些通用变量，比如我在组件级别声明的 this.xyz，但是我无法访问 subscribe 变量中的那个变量 wierd，无法修复这个问题，但是当我使用 promises 而不是 observable 时，我可以访问该变量： this.service.getUsers() .then((users: IUser[]) => { this.users = users; });