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

Question

问题

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

输出：

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

尝试

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

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

1. 我还尝试添加双花括号{{}}，这会导致同样的问题

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

在这种情况下有效

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

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

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

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