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屬性是UI僅在材料設計精簡版功能。例如如果禁用屬性存在於mdl-menu-item中，那麼只有一些css規則會改變ui。所以你的情況，你可以做到以下幾點：

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

空值刪除屬性。你也應該注意到點擊事件在任何情況下都被觸發。

這可以改善，但我想我會打破現有的行爲。我爲下一個主要版本提交了一個問題，使它更像（https://github.com/mseemann/angular2-mdl/issues/797）。