javascript - 角度启用/禁用 div 元素上的 contenteditable

Question

问题

我想将一个布尔值绑定contenteditable到一个不起作用的 div 指令。

输出：

无法绑定到“contenteditable”，因为它不是“div”的已知属性。

尝试

1. 我尝试添加[]括号以将变量绑定到它。editable是一个组件属性类型 boolean

<div class="text-editor"
     [contenteditable]="editable"></div>

2. {{}}我还尝试添加导致相同问题的双花括号

<div class="text-editor"
     contenteditable="{{editable}}"></div>

它适用于这种情况

true如果我只是简单地设置没有任何括号的字符串，那么它可以工作，但是这个解决方案不能解决我的要求，因为我想动态地改变行为

<div class="text-editor"
     contenteditable="true"></div>

我在 SO 上找不到任何问题的解决方案。我希望你知道一个解决方案，并可以与我分享。非常感谢。

标签： javascriptangular

Answer 1

使用任一[attr.contenteditable]="editable"

或者[contentEditable]="editable"

“属性”。prefix 将为您使用的任何后缀发出一个属性。

<div [attr.contenteditable]="editable">Edit me!</div>

或者

<div [contentEditable]="editable">Edit me!</div>

演示：https ://stackblitz.com/edit/angular-xablzf