将值绑定到Angular 6中的data-placeholder属性

Question

如何在Angular 6中将值绑定到div上的data-placeholder属性？

当我执行以下操作时：

<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

由于Angular不知道data-placeholder，因此必须在其前面加上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

您可以看到下面的代码参考。

Demo

您也可以通过上述方式实现。

<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;
}