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> 禁用属性不能使用布尔值（禁用=＆＃34; true＆＃34;或禁用=＆＃34; false＆＃ 34;表现得就像禁用一样）并且禁用不是<li>的原生属性，Angular2不允许我将其设置为[disabled]="item.disabled"。

有什么办法可以在特定条件下使用指令单独设置禁用属性吗？

有没有什么方法可以动态地在组件中有条件地设置属性（没有任何赋值）或指令？

先谢谢你的帮助!!

Answer 1

我还没有办法获得

<li disabled

但添加删除适用于

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

导致

<li disabled="true"

或

<li

Angular2 + MaterialDesignLite：动态添加html属性

1 个答案: