Angular 在 div 元素上启用/禁用 contenteditable

Question

问题

我想将一个布尔值绑定contenteditable到一个无法工作的 div 指令。

输出：

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

尝试

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

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

2. 我还尝试添加双大括号{{}}，这导致了同样的问题

<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