我有两个组件作为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;
}