angular - 在 Angular2 中，工具栏（md-toolbar）在与 [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 中，您只能对同一元素使用一个结构指令。您不能将NgForandNgSwitch放在同一个元素中。用于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>