Rx Subscribe OnComplete 触发但无法使用数据

Question

我有一个产品服务，其方法可以从 json 数据返回 Observable。

product.service.ts....

getProducts(): Observable<IProductData[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProductData[]> response.json())
        .catch(this.handleError);
}

在我的组件中，我订阅服务并调用 getProducts() 方法返回 Observable IProductData[]。

mycomponent.ts ..

productData: IProductData[];

ngOnInit(): void {

    this._productService.getProductsObservable()
        .subscribe(
                productData => this.productData = <IProductData[]>productData,
                error =>  this.errorMessage = <any>error,
                function() { console.log(this.productData ) }
        );
}

当我查看 onCompleted console.log this.productData 未定义！

我想使用这些数据来设置组件中的字段。何时/如何确定数据已返回？

如果我在按钮单击事件上输出 this.productData，则数据已被填充，但我想在初始化时执行此操作。

任何建议或意见将不胜感激。

干杯

Answer 1

您没有在最后一个块中使用箭头函数，因此您的 this 是您传入的 complete 函数的本地函数。

除了外观之外，() => {} 和 function() {} 之间存在实际语义差异

在这里阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

...直到箭头函数，每个新函数都定义了自己的 this 值（在构造函数的情况下是一个新对象，在严格模式函数调用中未定义，如果函数被称为“对象方法”，则为上下文对象，等等。）。事实证明，这种面向对象的编程风格很烦人。

在 ECMAScript 3/5 中，通过将 this 中的值分配给可以关闭的变量来解决此问题。

箭头函数不会创建自己的 this 上下文；相反，它捕获了封闭上下文的 this 值...