У меня есть главная страница со списком заказов (компонент 'list-orders'), каждый раз, когда я нажимаю на заказ, я открываю компонент 'order-details' через router-outlet.
в Компонент детали заказа у меня есть в html компоненте выбора ('app-list-products'), в этом селекторе я хочу передать данные о продуктах заказа ('order.products')
я использую управление состоянием NgRX и получаю данные заказа в компоненте list-orders в цикле OnInit. я делаю то же самое для компонента «детали заказа» (чтобы получить правильные детали заказа).
, но каждый раз, когда я меняю заказ, который я просматриваю (выбирая из представления «список заказов»), продукты я получил тот порядок, который хотел.
Может кто-нибудь объяснить мне, почему это происходит? как я могу это исправить?
list-order. html:
<ul class="list-group" *ngIf="orders.length">
<li
class="list-group-item"
*ngFor="let order of orders; let i=index">
<a routerLink='{{i}}'>
<p>Name: {{ order.name }}</p>
</a>
</li>
</ul>
list-order.ts:
ngOnInit() {
this.subscription = this.store.select('order')
.pipe(map(orderState => {
return orderState.orders;
}))
.subscribe(orders=> {
this.orders = orders;
});
}
order-details. html:
<div class="row" *ngIf="order">
<p>name: {{ order.name|| "------" }}</p>
<app-list-products [orderProducts]="order.products"></app-list-products>
</div>
order-details.ts
order: Order = null;
ngOnInit() {
let currUrl;
this.routeSub = this.route.params.pipe(
switchMap(() => {
currUrl = this.route.snapshot['_routerState'].url.substring(1).split('/');
return this.store.select('order')
}))
.subscribe(orderState => {
this.order = orderState['order'][+currUrl[1]];
});
}