Angular2 MDLの無効化mdl-menu-item not working

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のみの機能です。例えば無効な属性がmdl-menu-itemに存在する場合、UIを変更するCSSルールがいくつかあります。したがって、あなたのケースでは、以下を行うことができます：

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

null値は属性を削除します。また、どの場合でもclickイベントが発生することに注意してください。

これは改善される可能性がありますが、私は既存の動作を破ると思います。次のメジャーリリースのために、（https://github.com/mseemann/angular2-mdl/issues/797）のようにより角度をつけて問題を提出しました。