将值绑定到 Angular 中的数据占位符属性 6

Question

如何将值绑定到 Angular 6 中 div 的数据占位符属性？

当我执行以下操作时：

<div contenteditable="true" data-placeholder="{{placeholder}}">{{value}}</div>

我收到这个错误：

Can't bind to 'data-placeholder' since it isn't a known property of 'div'.

Answer 1

由于 data-placeholder 不为 Angular 所知，您必须在其前面加上 attr.

示例：

<div contenteditable="true" attr.data-placeholder="{{placeholder}}">
   {{value}}
</div>

或者，

<div contenteditable="true" [attr.data-placeholder]="placeholder">
   {{value}}
</div>

Answer 2

你可以使用[attr.data-placeholder]

<div contenteditable="true" [attr.data-placeholder]="placeholder">{{value}}</div>

Answer 3

您可以参考下面的代码。

你也可以按照上面的方式实现。

<div contenteditable="true" class="contentDiv" data-text="Enter text here"></div>

CSS 文件

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

.contentDiv {
  border: 1px solid black;
}

Bind a value to the data-placeholder attribute in Angular 6