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

Question

我有一个产品服务，其方法是 returns 来自 json 数据的 Observable。

product.service.ts.....

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

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

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 未定义！

我想使用这些数据来设置我的组件中的字段。 When/how能确定数据已经返回了吗？

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

如有任何建议或建议，我们将不胜感激。

干杯

Answer 1

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

除了外观之外，() => {} 和 function() {}

之间还有实际的语义差异

阅读此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

...Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

An arrow function does not create its own this context; rather, it captures the this value of the enclosing context...

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

Rx Subscribe OnComplete fires but cannot use the data

json

observable

rxjs

typescript

angular