angular 5从服务获取程序访问可观测数据 服务 组成部分 控制台截图

问题

---

我需要以编程方式访问

this.Cart

，但当我尝试更深入一些时，我会不断遇到未定义或ts编译错误，例如

this.Cart.data

返回未定义的服务

_cart:any;

fetchCartData(){
    this.http.get('/api/cart').subscribe (res => {this._cart = res});
}

get Cart() {
     return this._cart;
}

getCartData() {
    return this.http.get('/api/cart');
}

组件

get Cart() {
    return this.service.Cart;
}

ngOnInit(){
    this.service.getCartData().subscribe(res => {
        console.log(res); // here you will get desired data.
    });
}

HTML

<p>{{Cart | json }}</p>

组件

get Cart() {
    return this.service.Cart;
}

ngOnInit(){
    this.service.getCartData().subscribe(res => {
        console.log(res); // here you will get desired data.
    });
}

---

将HTML粘贴到您访问它的位置。它正在工作，您可以检查

https://stackblitz.com/edit/angular-s5wtcv

此.cart

是可观察的。这是我订阅的一个api调用的结果。如果它是可观察的，则必须使用异步管道。另一个解决方案是从api获取数据，并在服务中订阅分配变量中的数据，然后在组件中使用getter访问服务的变量。我已经添加了答案，您可以参考它。是的，这很有效。但我需要访问我的组件。尝试此

ngOnInit（）{console.log（Cart）}

返回

未定义的

是，这可能是因为在您访问它时，尚未从API获取数据。如果您想在收到数据后立即发布一些内容，请在组件中订阅api。@Omar我又添加了一个解决方案，它将帮助您。可能没有“简单”的方法来获得我想要的内容。我订阅数据并在服务中生成getter，因为我需要在多个组件中重用数据。它减少了api调用==>考虑到这一点，您仍然建议订阅组件吗？