md-menu binding # dynamic

Hi all, I want to assign the md-menu trigger action as the code below, but failed. Can you guide me?

  <div *ngFor="let menuItem of mainMenu">
   <div ng-if="menuItem.item.length > 0">
    <button md-button [mdMenuTriggerFor]="menuItem.mdMenuTriggerFor">
     <md-icon svgIcon="{{menuItem.icon}}"></md-icon>
     <span>{{menuItem.title}}</span>   
    </button>
    <md-menu {{menuItem.mdMenuTriggerFor}}="mdMenu">
     <div *ngFor="let item of menuItem.item">
      <button md-menu-item routerLink="{{item.routerLink}}">
       <md-icon svgIcon="{{item.icon}}"></md-icon>
       <span>{{item.title}}</span>
      </button>
     </div>
    </md-menu>
   </div>
   <div ng-if="menuItem.item.length == 0">
    <button md-button routerLink="{{menuItem.routerLink}}">
     <md-icon ng-if="menuItem.icon.length != 0" svgIcon="{{MenuItem.icon}}"></md-icon>
     <span>{{menuItem.title}}</span>   
    </button>
   </div>

[mblundred-yseop]

What was the fix? I’m having this problem too.

[leehung-net]

display correct

<div *ngFor="let menuItem of menus">
    <button md-button [mdMenuTriggerFor]="menu">
       <span>{{menuItem.title}}</span>
    </button>
    <md-menu #menu="mdMenu">
      <button md-menu-item>Refresh - {{menuItem.title}}</button>
      <button md-menu-item>Settings - {{menuItem.title}}</button>
    </md-menu>
</div>