Angular Material2中Mat-Menu渲染列表项报错，求排查问题

你遇到的这个错误主要是两个小问题导致的，咱们一步步来修正：

错误原因分析 #

1. 语法拼写错误：你写的*ngFor="let hi ofListofPizza"里，of和变量名ListofPizza之间少了空格，Angular会把ofListofPizza当成一个无效的标识符，直接触发模板绑定相关的错误提示。
2. 组件使用方式错误：Angular Material 2的菜单组件设计和Material 1不一样，mat-menu-item是一个需要直接绑定在按钮/链接上的指令，而不是像Material 1那样作为容器元素嵌套按钮。你现在的写法把mat-menu-item单独作为外层元素，再嵌套mat-button，既不符合组件规范，也容易引发模板绑定冲突。

修正后的代码 #

<button mat-fab color="primary" [matMenuTriggerFor]="menu">
  <mat-icon svgIcon="extraIcons:toolbox"></mat-icon>
</button>
<mat-menu #menu="matMenu">
  <!-- 直接在带有mat-menu-item指令的button上使用*ngFor循环 -->
  <button mat-menu-item *ngFor="let hi of vm.ListofPizza" (click)="vm.orderPizza(hi.id)">
    {{hi.name}}
  </button>
</mat-menu>

关键修改点说明 #

• 把mat-menu-item指令直接加到button上，这样这个button就成为菜单的可点击项，完全符合Material 2的组件设计逻辑。
• 把*ngFor循环直接应用在这个button上，既实现了列表渲染，又避免了“多个模板绑定”的错误。
• 修正了*ngFor的语法，给of和ListofPizza之间加上空格，同时保留了和Material 1一致的vm.ListofPizza变量引用（如果你的变量是直接在组件类根级别，改成of ListofPizza即可）。

内容的提问来源于stack exchange，提问作者pankaj