Я использую 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>
