组件值更改后，角度视图未更新 [英] angular view is not updating after component value gets changed

问题描述

我有一个有三个视图的购物车.顶部页眉视图、中间产品视图、底部页脚视图.每个视图都有自己的组件.

Hi I have cart which has three views. Top header view, Middle Products view, Bottom footer view. Each view has its own components.

在标题视图中，我想显示购物车产品数量旁边有购物车图标.

In header view, I have cart icon next to that I want to show the cart products count.

我有两种情况:

Scenaio1:假设 Cart 包含两个产品，当页面加载时，所有三个视图都根据各自的组件数据加载.在这种情况下，购物车计数按预期显示为 2.

Scenaio1: Assume Cart contains two products, when the page loads all the three views get loaded as per their individual components data. In this scenario Cart count is showing 2 as expectd.

场景 2:不，我正在单击中间视图中可用产品之一的添加到购物车选项.产品正确添加到数据中 我需要更新标题视图中的购物车计数，所以我从中间视图调用标题组件中可用的一个函数，并将一个添加到标题中可用的实际购物车计数变量成分.当我放置日志时，购物车计数打印正确，但标题视图没有更新.有人可以帮助我如何获得更新的价值.

Scenario2: No I'm clicking add to cart option for the one of the product available in the middle view. product added to the data correctly I need to update the cart count in the header view, So I'm calling the one function available in the header component from the middle view and adding one to the actual cart count variable which is available in the header component. when I put logs cart count is printing correctly but header View is not getting updated. Can someone help me how to get updated value.

源代码:

...............
........
noOfItems:any = 2;
update updateCartCount(){
  this.noOfItems = this.noOfItems + 1;
}
........
............

标题视图(HTML 文件):

<li class=""><a routerLink="/my-cart" alt="Wishlist"
                                            title="Wishlist"><i class="fa fa-shopping-cart"></i>**{{noOfItems}}**</a></li>

中间组件

import {headerComponent} from './../../HeaderFooter/components/header.component';


export class DashboardRole implements AfterViewInit {

headerComp = new headerComponent();

  addProductToCart(){
      .....logic to save product details to database....
      this.headerComp.updateCartCount();
  }
}

推荐答案

这似乎非常适合可观察数据服务

This seems like a good fit for an observable data service

interface Item {
    id: number;
    name:string;
    price:number;
}

@Injectable()
export class Cart {
    private _items: BehaviorSubject<List<Item>> = new BehaviorSubject(List());

    public items: Observable<Item[]> = this._items.asObservable();

    addItem(newItem:Item):Observable{
         this._items.next(this._items.getValue().push(newItem));
    }
}

然后你可以像这样在组件内部使用 Cart

Then you can consume the Cart either inside the component like this

@Component({
    selector: 'app-cart-counter',
    template: `
        <div>Count: {{items.length}}</div>
    `
})
export class CartCounterComponent implements OnInit {
    items: Item[];

    constructor(
        private cart: Cart
    ) {}

    ngOnInit(){
        this.cart.items.subscribe(items => this.items = items;)
    }
}

或者像这样直接在模板中使用observable

Or use the observable directly in the template like this

@Component({
    selector: 'app-cart-counter',
    template: `
        <div>Count: {{(cart.items | async).length}}</div>
    `
})
export class CartCounterComponent{
    constructor(
        private cart: Cart
    ) {}
}

有关组件交互的更多信息可以在此处的文档中找到:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

More information on component interaction can be found in the docs here: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

可以在此处找到有关可观察数据服务模式的更多信息:http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

More can be found on the Observable Data Service pattern here: http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

这篇关于组件值更改后，角度视图未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！