如何在 OnInit 之后更新视图上的属性绑定？ （角度）

Question

我在服务中使用 BehaviorSubject 将选定对象广播到其他组件。该服务的所有功能都可以正常工作，包括更新选定的对象。

我的问题是，当我在尝试获取对象的组件中运行服务时，ngOnInit 会更新变量的属性，但在我的视图中它没有更新。

我曾尝试使用 onChanges 生命周期挂钩，但显然这不适用于对象。

请告诉我我做错了什么。我知道我遗漏了几行代码，仅此而已。

这是我的父组件 TypeScript 文件。

  open(content, product: Product) {
    this.modalService2.open(content, { windowClass: 'dark-modal' });
    this.addToCartService.changeProduct(product);
  }

每当我在视图中单击“添加到购物车”时，它都会触发“Open()”方法，该方法将所选产品发送到此服务..

加入购物车服务代码：

@Injectable()
export class AddToCartService {

    product: Product;

    private productSource = new BehaviorSubject<Product>(this.product);
    currentProduct = this.productSource.asObservable();

    constructor() { }

    changeProduct(product: Product){
        this.productSource.next(product);
    }
}

最终产品在服务中更新，并由下一个组件访问，该组件应该显示具有更新产品属性的模式..

添加到购物车（子）组件打字稿文件：

ngOnInit() {
   this.updateBeer();

  }



  updateBeer()
  {
    console.log(this.beerselected);//initially "beerselected" is undefined
    this.addToCartService.currentProduct.subscribe( beer => this.beerselected = beer);
    console.log("from add to cart", this.beerselected);//"beerselected is updated with the object, but the property bindings in the view are still null"
  }

最初它是未定义的，然后调用服务，变量 beerselected 更新其属性，但视图绑定到 beerselected，但仍显示未定义。

Product Model class:

   export class Product
{
    id: string="beer 1";
    beerName: string="beer 2";
    alcoholPercent: number=5;
    beerType: string="pilser";
    beerPrice: number=10;
    beerAmount: number=120;
    servingSize: number=8;
    beerPicture: string="../assets/";
}

如果有帮助，这里是添加到购物车的 HTML，

   <div class="col-8">
              <h5 class="m-b-0">Beer Name: {{beerselected?.beername}}</h5>
              <ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating><br>
              <span><b>Type: </b></span>
              <span class="text-muted">{{beerselected?.beername}}</span> <br>
              <span><b>Alcohol %: </b></span>
              <span class="text-muted">{{beerselected?.beername}}</span> <br>
              <span><b>Description: </b></span>
              <span class="text-muted"></span> <br>
          </div>

Answer 1

好的，我想出的解决方案是我在前端绑定数据的方式。而不是使用 {{beerselected."whatever property"}} 它需要是 {{beerselected.product.property}}