javascript - 如何以 Angular 访问组件类中的可观察对象值？

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>