В Angular2 панель инструментов (md-toolbar) не загружает кнопки при использовании с [ngSwitch]

Я создаю панель инструментов с кнопкой Меню на ней таким образом:

<md-toolbar class="header">
<div class="header-wrapper m-x-30 clearfix">
  <div class="logo-container">
     <div class="logo-image align-middle">
     </div>
  </div>
  <div>
     <button>
        <div class="menu-image">
        </div>
     </button>
  </div>
 </div>
</md-toolbar>

Теперь, когда я использую [ngSwitch] для размещения кнопок в соответствии с типом, кнопка создается за панелью инструментов и не видна:

<md-toolbar class="header">
<div class="header-wrapper m-x-30 clearfix">
    <div class="logo-container">
        <div class="logo-image align-middle">
        </div>
    </div>
    <div *ngFor="let i of apptoolbar" [ngSwitch]="i.type">
        <div *ngSwitchCase="'MenuButton'">
            <button>
                <div class="menu-image">
                </div>
            </button>
        </div>
    </div>
</div>
</md-toolbar>

1 ответ

  1. В Angular2 можно использовать только одну структурную директиву для одного элемента. Вы не можете поместить NgForи NgSwitchв тот же элемент. Используйте ng-containerдля разделения двух.

    Измените код следующим образом:

    <md-toolbar class="header">
        <div class="header-wrapper m-x-30 clearfix">
            <div class="logo-container">
                <div class="logo-image align-middle">
                </div>
            </div>
            <div *ngFor="let i of apptoolbar">
                <ng-container [ngSwitch]="i.type">
                    <div *ngSwitchCase="'MenuButton'">
                        <button>
                            <div class="menu-image">
                            </div>
                        </button>
                    </div>
                </ng-container>
            </div>
        </div>
    </md-toolbar>