如何以角度访问组件类中的可观察对象值？

Question

我正在发送一个具有两个值的对象 1- 数组 2- 简单变量 该对象正在使用 observable 在另一个组件中接收，从那里我可以直接将对象值访问到 html 模板文件中

这是代码

家庭组件

export class HomeComponent implements OnInit {
    itemscount:Number = 0;
    cart = [];
    cartobj = {};
    constructor(private _data: DataService) { }

    ngOnInit() {
        this.itemscount = this.cart.length;
        this._data.cast.subscribe(res => this.cartobj = res);
        this._data.changeCart(this.cartobj);

    }

    additem(itemText){
        this.cart.push(itemText);
        this.itemscount = this.cart.length;
        this.cartobj = {cart_items:this.cart,items_count:this.itemscount}
        this._data.changeCart(this.cartobj);
    }
}

标头组件

export class HeaderComponent implements OnInit {
    cartobj: any;
    cart = [];
    constructor(private _data: DataService) {

    }

    ngOnInit() {
        this._data.cast.subscribe(res =>  this.cartobj = res);
        //this.cart = this.cartobj.cart_items;
    }

}

标头组件 html 模板

<li *ngFor="let items of cartobj.cart_items">
    {{ items }}
</li>

{{cartobj.items_count}}

数据服务代码

export class DataService {

    private cartobj = new BehaviorSubject<any>({});
    cast = this.cartobj.asObservable();

    constructor() { }

    changeCart(item_param) {
        this.cartobj.next(item_param);
        console.log(this.cartobj);
    }

}

目前我直接在 header html 模板中访问该对象。我只想先访问标头组件文件中的对象，然后再访问 html 模板中的对象。

谢谢。

Answer 1

当您想在模板中使用可观察对象时，通常您需要管道async，所以您的意思可能是

<li *ngFor="let items of (cartobj | async).cart_items"> {{ items }} </li>