如何在Mat-Menu Angular/material2中渲染项目列表 [英] How to render list of items inside 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:

在一个元素上不能有多个模板绑定.只使用一个 名为'template'或以*(

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