导航栏中的动态按钮无法正确显示

Question

我在导航栏中遇到动态按钮时遇到问题。下面的代码：

<ion-header> 
    <ion-navbar> 
     <button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>{{action.name}}</ion-title> 

     <ion-buttons end> 
      <button *ngIf="view.searchable"> 
       <ion-icon name="search"></ion-icon> 
      </button> 
      <button *ngIf="view.creatable"> 
       <ion-icon name="create"></ion-icon> 
      </button> 
      <button (click)="showMenu($event)"> 
       <ion-icon name="more"></ion-icon> 
      </button> 
     </ion-buttons> 
    </ion-navbar> 
</ion-header> 

输出：

请帮助。谢谢！

Answer 1

由于某些原因，*ngIf正在引发该问题（您可以尝试删除它，并且该按钮已正确显示）。为了解决这个问题，你可以这样改：

<ion-header> 
    <ion-navbar> 
     <button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>{{action.name}}</ion-title> 

     <ion-buttons *ngIf="view.searchable" end> 
      <button> 
       <ion-icon name="search"></ion-icon> 
      </button> 
     </ion-buttons> 
     <ion-buttons *ngIf="view.creatable" end> 
      <button> 
       <ion-icon name="create"></ion-icon> 
      </button> 
     </ion-buttons> 
     <ion-buttons end> 
      <button (click)="showMenu($event)"> 
       <ion-icon name="more"></ion-icon> 
      </button> 
     </ion-buttons> 
    </ion-navbar> 
</ion-header> 

请注意，我绑定*ngIf到ion-buttons元素，而不是直接button。请看看working plunker。