在Angular2中,工具栏(md-toolbar)在与[ngSwitch]一起使用时不加载按钮

时间:2017-01-13 13:10:49

标签: angular angular2-material

我正在以这种方式创建一个带有菜单按钮的工具栏:

<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 个答案:

答案 0 :(得分:0)

在Angular2中,您只能在同一元素上使用一个结构指令。您不能将NgForNgSwitch放在同一个元素中。使用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>