如何在 Mat-Menu Angular/material2 中呈现项目列表 [英] How to render list of items inside Mat-Menu Angular/material2
本文介绍了如何在 Mat-Menu Angular/material2 中呈现项目列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
回到 materialc1,我能够在我的材质菜单中呈现一个按钮列表,如下所示:
Back in materialc1 I was able to render a list of buttons inside my material menu as below:
<md-menu>
<md-button ng-click="vm.openMenu($mdMenu, $event)">
<md-icon md-svg-icon="extraIcons:toolbox" aria-label="Toolbox"></md-icon>
</md-button>
<md-menu-content>
<md-menu-item ng-repeat="hi in vm.ListofPizza">
<md-button ng-click="vm.orderPizza(hi.id)">
{{hi.name}}
</md-button>
</md-menu-item>
</md-menu-content>
我正在尝试在 material2/angular2 中做同样的事情,如下所示:
I am trying to do the same in material2/angular2 as shown below:
<button mat-fab color="primary" [matMenuTriggerFor]="menu">
<mat-icon svgIcon="extraIcons:toolbox">
</mat-icon>
</button>
<mat-menu #menu="matMenu">
<mat-menu-item *ngFor="let hi ofListofPizza">
<button mat-button> {{hi.name}}</button>
</mat-menu-item>
但是这给了我下面提到的错误:
However this gives me below mentioned error:
不能在一个元素上有多个模板绑定.只使用一个名为模板"或前缀为 * ("
menu="matMenu">
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("
menu="matMenu">
我做错了什么?
推荐答案
这就是它应该的样子.
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let item of ofListofPizza">
{{ item.text }}
</button>
</mat-menu>
这篇关于如何在 Mat-Menu Angular/material2 中呈现项目列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文