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

Question

问题

我想将一个 bool 值绑定(bind)到 contenteditable 指令到一个不起作用的 div。

输出:

Can't bind to 'contenteditable' since it isn't a known property of 'div'.

尝试

1. 我尝试添加 [] 括号以将变量绑定(bind)到它。 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