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

禁用属性是 ui 精简设计 material 中的唯一功能。例如只有一些 css 规则会更改 ui 如果 disabled 属性出现在 mdl-menu-item 上。因此，在您的情况下，您可以执行以下操作：

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

空值删除属性。另外你应该注意，在任何情况下都会触发点击事件。

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

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

Angular2 MDL disabling mdl-menu-item not working

angular2-mdl

angular-mdl