角启用/禁用div元素上可编辑的内容

Question

问题

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

输出：

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

试一试

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

。

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

1. I还试图添加双花括号{{}}，这导致了

的相同问题。

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

它在这种情况下有效。

如果我只是将字符串true设置为没有任何括号，那么它就能工作，但是这个解决方案并不能解决我的需求，因为我想动态地更改的行为。

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

我找不到任何解决问题的办法。我希望你知道一个解决方案，并能与我分享。非常感谢。

Answer 1

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

或[contentEditable]="editable"

“阿塔尔”前缀将为您使用的任何后缀发出一个属性。

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

或

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

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