導航欄中的動態按鈕無法正確顯示

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。