Angular2 MDL禁用MDL菜单项不起作用

Question

I am trying to disable mdl-menu-item based on condition set by module.

my app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ca-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  test() {
    return true;
  }
}

my app.component.html

<button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="raised" mdl-ripple>Options</button>
  <mdl-menu #m1="mdlMenu" mdl-menu-position="top-left">
    <mdl-menu-item mdl-ripple [disabled]="test()">Draw Object</mdl-menu-item>
    <mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
    <mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>

At this stage the menu item is never disabled, not sure what i am doing wrong here.

Answer 1

The disabled attribute is a ui only feature in material design lite. eg there are only some css rules that change the ui if the disabled attribute is present on an mdl-menu-item. So in your case you can do the following:

<mdl-menu-item [attr.disabled]="test() ? '' : null">Draw Object</mdl-menu-item>

The null value removes the attribute. Also you should note that the click event is fired in any case.

This could be improved but I think I would break existing behavior. I have filed an issue for the next major release to make it more angular like ( https://github.com/mseemann/angular2-mdl/issues/797 ).