2016-07-20 3 views
0

navbar의 동적 버튼에 문제가 있습니다. 여기 코드는 다음과 같습니다navbar의 동적 버튼이 올바르게 표시되지 않습니다.

<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> 

출력 :

navbar

이 도와주세요. 감사!

답변

2

어떤 이유로 인해 *ngIf이 문제를 일으키고 있습니다 (제거하여 시도하면 버튼이 제대로 표시 될 수 있음). 이를 해결하기 위해, 당신은 다음과 같이 변경할 수 있습니다 : 내가 대신 직접 buttonion-buttons 요소에 *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> 

공지 사항. 이 working plunker을보십시오.

+0

이 솔루션은 정상적으로 작동합니다. 그러나 나는 이것이 좋지 않기 때문에 이것을 피하려고 노력하고있다. 아무튼 감사 해요. –

관련 문제