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

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。