无法绑定到“禁用”，因为它不是“li”的已知属性

Posted 2023-03-13

【中文标题】无法绑定到“禁用”，因为它不是“li”的已知属性

【英文标题】：Can't bind to 'disabled' since it isn't a known property of 'li'

【发布时间】：2017-05-05 14:23:16

【问题描述】：

我将[disabled] 属性添加到li 元素。但我得到这个错误：

无法绑定到“已禁用”，因为它不是“li”的已知属性。

这是我的代码部分：

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

谁能帮帮我？

【参考方案1】：

<li> 元素没有 disabled 属性。 您希望应用于<li 的组件或指令实际上没有被应用，或者应该设置disabled 属性而不是属性

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

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

<li disabled="false">

这可能不是你想要的。使用null 你会得到

<li>

【讨论】：

感谢您的回答，它的工作。但是虽然li 元素有disabled 属性，但是还是可以点击的。使用a元素时会发生。

请参阅下面的答案。 <li> 不支持被禁用。 <a> 元素也不太容易禁用。另见***.com/questions/35431188/… 和***.com/questions/36985112/…

是的，我在下面看到答案

【参考方案2】：

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

禁用元素

如果某个元素属于以下类别之一，则称该元素实际上已被禁用：

被禁用的按钮元素 被禁用的输入元素 选择被禁用的元素 被禁用的 textarea 元素 具有禁用属性的 optgroup 元素 被禁用的选项元素 具有禁用属性的字段集元素

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

所以禁用 li 是没有意义的，因为它没有任何开始的操作。

另一种理解方式，即 disabled 属性实际上是由表单相关指令定义的 @Input 属性，例如 FormControl 或 FormControlName 和 ... ，所以如果你不使用这些指令，你不能有禁用的属性。

例如，输入可以具有 disabled 属性，因为它可以具有 NgModel ，但 li 或 div 不能具有 disabled 属性，因为它永远不能具有 NgModel ！

所以为了 [disabled] 工作，angular 会检查两件事：

1- disabled 是 Angular2 定义的指令还是您定义的指令？ （没有）。

2- disabled 是由另一个指令定义的 @input ? （是的，它已定义，但您没有使用它们，因为 li 不能拥有 FormControl！）。

那么Angular2会抛出一个错误。

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

所以如果你只需要 disabled 属性作为一个普通的 html 属性来做一些 css 的东西，你应该使用 [attr.disabled]。

【讨论】：

xe4me，非常感谢

这个 [attr.disabled] 不适合我。