离子2导航栏

Question

我正在尝试在我的应用的导航栏中添加一些按钮，

<ion-header>

    <ion-navbar hideBackButton #detailsNav style="height:70px" [formGroup]="detailsForm">

        <!--<ion-title>-->
            <table style="width:100%">
                <tr>
                    <td style="width:20%;">
                        <button ion-button outline style="height:28px;font-size:12px" (click)="onCancel()">Cancel</button>
                    </td>
                    <td style="width:60%;text-align:center;font-weight:bold;font-size:16px;">
                        <div>Details Edit</div>
                    </td>
                    <td style="width:20%;">
                        <button ion-button style="height:28px;font-size:12px" (click)="onSubmit()" [disabled]="!detailsForm.valid">Save</button>
                    </td>
                </tr>
            </table>
        <!--</ion-title>-->

    </ion-navbar>

</ion-header>

当我在 android 上运行该应用程序时，它运行良好，但在 iPhone 上，当我按下取消按钮并导航到上一页时，页眉将在前一页页眉上显示一段时间

如果我将表格放在 ion-title 标记内，它会正常工作，但不会占用所有可用宽度，这仅在 iPhone 上发生。 有没有办法做到这一点而不会出现这种滞后？

提前致谢

Answer 1

<ion-header>
   <ion-toolbar>
    <ion-buttons start>
       <button ion-button outline (click)="onCancel()">
        Cancel
       </button>
     </ion-buttons>
     <ion-title>Details Edit</ion-title>
     <ion-buttons end >
       <button ion-button (click)="onSubmit()" [disabled]="!detailsForm.valid"">
         Save
       </button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

查看文档了解更多详情here