Angular2 + MaterialDesignLite: Добавить HTML свойство динамически

Question

Я работаю с Angular2 и MaterialDesignLite и хотите достичь меню так же, как этот:

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
    for="demo-menu-lower-left"> 
    <li class="mdl-menu__item">Some Action</li> 
    <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> 
    <li disabled class="mdl-menu__item">Disabled Action</li> 
    <li class="mdl-menu__item">Yet Another Action</li> 
</ul> 

Давайте сосредоточимся на инвалидов собственности. Я хочу, чтобы он появлялся всякий раз, когда я хочу отключить запись в меню, но оставив ее видимой. Это то, что я достиг до сих пор:

<div class="mdl-menu__container-menu"> 
    <div class="mdl-menu__outline mdl-menu--bottom-right"></div> 
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" [attr.for]="id"> 
     <li [attr.disabled]="item.disabled" *ngFor="#item of items" class="mdl-menu__item" (click)="onClick($event, item.id)">{{item.text}}</li> 
    </ul> 
</div> 

К сожалению, MDL <li>инвалидов свойство не работает с логическим значением (отключено = «истина» или выключено = «ложь» ведут себя так же, как инвалидов сам по себе) и как отключен не является родным свойство <li>, Angular2 не позволяет мне устанавливать его как [disabled]="item.disabled".

Есть ли какой-либо способ установить отключенный объект самостоятельно, при определенном условии, с помощью директивы?

Есть ли способ условно установить свойство (без какого-либо назначенного значения) или директивы в компоненте динамически?

Заранее благодарим за помощь!

Answer 1

Я не нашел способ, чтобы получить

<li disabled 

но добавляющие удаление работы с

<li [attr.disabled]="item.disabled ? true : null" 

, что приводит к

<li disabled="true" 

или

<li