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

Posted 2023-03-13

【中文标题】Rx Subscribe OnComplete 触发但无法使用数据

【英文标题】：Rx Subscribe OnComplete fires but cannot use the data

【发布时间】：2017-01-06 18:39:33

【问题描述】：

我有一个产品服务，其方法可以从 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，则数据已被填充，但我想在初始化时执行此操作。

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

干杯

【参考方案1】：

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

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

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

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

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

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

【讨论】：

谢谢保罗！我现在对箭头函数在 JavaScript 中的工作方式有了更清晰的了解:)