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