0

我有两个组件作为OrderListComponentOrderDetailComponentOrderDetailComponent有两个输入@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.

当第一次在模板中单击“详细信息”按钮时OrderListComponentOrderDetailComponent将按预期使用正确的参数激活。OrderDetailComponent但保存订单后,即使点击“详情”按钮也无法激活。

我发现这很有趣,因为我正在向它发送参数OrderDetailComponent并且在第一时间它工作正常。但是对“详细信息”按钮的新点击无法OrderDetailComponent再次激活。

我怎么解决这个问题?谢谢你。

编辑:这是“updateOrder”功能:

updateOrder(): void {
this.orderService.updateOrder(this.order).subscribe(() => this.goBack());
this.isHidden =  true;

}

4

1 回答 1

0

我认为您的问题是,一旦 isDetailsClicked 设置为 true,它就不会设置回 false,我会将该部分更改为如下所示:

<div *ngIf = "isDetailsClicked">
    <app-order-detail [order]="clickedOrder" [isHidden]="!isDetailsClicked"></app-order-detail>
</div>
于 2018-05-11T03:39:57.967 回答