无法绑定到'禁用',因为它不是'li'的已知属性

Question

我添加了[disabled]属性li元素.但我得到这个错误:

无法绑定到"已禁用",因为它不是"li"的已知属性.

这是我的代码部分:

<li [disabled]="pager.currentPage > 1">
</li>

谁能帮我？

Answer 1

该<li>元素没有disabled属性.
您希望应用的组件或指令<li实际上未应用,或者可能disabled应该设置属性而不是属性

<li [attr.disabled]="pager.currentPage > 1 ? true : null">

null是在条件为假的情况下删除属性.一个布尔值false会导致

<li disabled="false">

这可能不是你想要的.随null你而来

<li>

Answer 2

添加Gunter的答案.禁用属性仅对具有可以禁用的操作的html标记有意义.

禁用的元素

如果一个元素属于以下类别之一,则该元素实际上被禁用:

• 禁用的按钮元素
• 已禁用的输入元素
• 选择已禁用的元素
• 禁用的textarea元素
• 具有禁用属性的optgroup元素
• 禁用的选项元素
• 具有禁用属性的fieldset元素

https://www.w3.org/TR/html5/disabled-elements.html

因此,禁用li是没有意义的,因为它没有任何操作可以开始.

理解这一点的另一种方法是,禁用属性实际上是一个@Input属性,它由表单相关的指令定义,比如FormControl或FormControlName和...,所以如果不使用这些指令,则不能使用禁用的属性.

例如,输入可以具有禁用属性,因为它可以具有NgModel,但是li或div不能具有禁用属性,因为它永远不会具有NgModel!

因此,对于[禁用]工作,angular会检查两件事:

1-是否禁用了由Angular2定义或由您定义的指令？(不).

2-是否禁用了由标签中同一级别使用的另一个指令定义的@input(如NgModel,FormControl和..)？(是的,它已定义,但您没有使用它们,因为li不能使用FormControl!).

那么Angular2就会抛出一个错误.

当你执行[attr.disabled]时,这不再是@Input,它只是一个普通的html属性,就像所有其他普通属性一样.

因此,如果你只需要使用disabled属性作为普通的html属性来做一些css的东西,你应该使用[attr.disabled].