在工具栏中，当与[ngSwitch]一起使用时，工具栏(md- Angular2 )不会加载按钮
在工具栏中，当与[ngSwitch]一起使用时，工具栏(md- Angular2 )不会加载按钮
提问于 2017-01-13 13:10:49
我以这种方式创建了一个带有菜单按钮的工具栏：
<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
Stack Overflow用户
发布于 2017-01-13 13:32:01
在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41635399
复制
相似问题
如何使md-工具栏响应
垂直md-工具栏
与导航抽屉一起使用时工具栏后退按钮不能工作
工具栏不会显示菜单按钮
当与窗体中的按钮一起使用时，.showSaveDialog()不会执行
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
