Question

我发送的对象有两个值1- array 2- simple variable 这个对象在另一个组件中使用observable接收，从那里我直接访问对象值到html模板文件

这是代码

Homecomponent

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);
    }

}

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

感谢。

Answer 1

当您想在模板中使用observable时，通常需要async管道，所以可能意味着

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

Answer 2

实际上你不能这样做，你必须把这行代码放在订阅本身，因为它的asyc和你的评论行将同时运行

替换此代码

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

使用

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

Answer 3

也有诺言

const cast = await this._data.cast.toPromise();

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

3 个答案: