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

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.

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

Dynamic button in navbar not displaying correct

ionic-framework

ionic2