Angular2 MDL отключение mdl-menu-item не работает
Я пытаюсь отключить 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>
На этом этапе пункт меню никогда не отключается, не уверен, что я здесь не так делаю.
1 ответ
Атрибут disabled - это только функция пользовательского интерфейса в lite design design. Например, есть только некоторые правила CSS, которые изменяют пользовательский интерфейс, если атрибут отключен в mdl-menu-item. Так что в вашем случае вы можете сделать следующее:
<mdl-menu-item [attr.disabled]="test() ? '' : null">Draw Object</mdl-menu-item>
Нулевое значение удаляет атрибут. Также вы должны отметить, что событие click срабатывает в любом случае.
Это могло бы быть улучшено, но я думаю, что сломал бы существующее поведение. Я подал вопрос для следующего основного выпуска, чтобы сделать его более угловатым ( https://github.com/mseemann/angular2-mdl/issues/797).