在Angular2，工具欄（MD-工具欄）與使用時不會加載按鈕的[ngSwitch]

Question

我創建一個菜單按鈕就可以了這樣一個工具欄：

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

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