У меня есть два компонента: OrderListComponent и OrderDetailComponent.OrderDetailComponent имеет два ввода: @Input() order: Order; и @Input() isHidden: boolean;
Я перечислял много заказов в шаблоне OrderListComponent и всякий раз, когда нажимается кнопка «Подробности», я активирую OrderDetailComponent, отправляя объект заказа, который нажали isHidden переменная как false. (В каждом заказе есть кнопка «детали»)
В шаблоне «order-list.component.html» приведен следующий код:
<div [hidden]="!isDetailsClicked">
<app-order-detail [order]="clickedOrder" [isHidden]="!isDetailsClicked"></app-order-detail>
</div>
ШаблонOrderDetailComponent выглядит следующим образом:
<div [hidden]="isHidden" *ngIf="order">
<h2>{{ order.productName}} Order Details</h2>
<div>
<span>id: </span>{{order.orderID}}
</div>
<div>
<label>order id: <input [(ngModel)]="order.orderID"
placeholder="orderID" [readOnly]="true"/>
</label>
<label>product name: <input [(ngModel)]="order.productName"
placeholder="productName" [readOnly]="true"/>
</label>
<label>amount: <input [(ngModel)]="order.numberOfProduct"
placeholder="numberOfProduct" [readOnly]="true"/>
</label>
<label>orderer: <input [(ngModel)]="order.orderer"
placeholder="orderer" [readOnly]="true"/>
</label>
<label>status: <input [(ngModel)]="order.status"
placeholder="status"/>
</label>
</div>
<button (click)="goBack()">go back</button>
<button (click)="updateOrder()">save</button>
Когда я нажимаю кнопку «Сохранить», я скрываю OrderDetailComponent.
Когда кнопка «Подробности» нажимается первый раз в шаблоне OrderListComponent, OrderDetailComponent активируется с правильными параметрами, как ожидалось.Но после сохранения заказа я не могу активировать OrderDetailComponent, даже нажимая кнопку «Подробнее».
Мне показалось это интересным, потому что я отправляю параметры на OrderDetailComponent, и в первый раз он работает правильно.Но новые нажатия кнопки «Подробности» не могут снова активировать OrderDetailComponent.
Как я могу решить эту проблему?Спасибо.
Правки: вот функция "updateOrder":
updateOrder(): void {
this.orderService.updateOrder(this.order).subscribe(() => this.goBack());
this.isHidden = true;
}