Angular2 MDL禁用mdl-menu-item不起作用

Question

我正在尝试根据模块设置的条件禁用 mdl-menu-item。

我的 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;
  }
}

我的 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>

在这个阶段菜单项永远不会被禁用，不确定我在这里做错了什么。

Answer 1

disabled 属性是 Material Design lite 中唯一的 ui 功能。例如如果 mdl-menu-item 上存在 disabled 属性，则只有一些 css 规则会更改 ui。因此，在您的情况下，您可以执行以下操作：

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

空值删除属性。您还应该注意，在任何情况下都会触发 click 事件。

这可以改进，但我认为我会打破现有行为。我已经为下一个主要版本提交了一个问题，以使其更像 (https://github.com/mseemann/angular2-mdl/issues/797)。