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，但是它仍显示为undefined。

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。“任何属性”}}}，而需要使用{{beerselected.product.property}}