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

【问题标题】：Bind a value to the data-placeholder attribute in Angular 6将值绑定到 Angular 6 中的 data-placeholder 属性
【发布时间】：2018-12-17 21:48:29
【问题描述】：

如何将值绑定到 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'.

【问题讨论】：

标签： html angular angular6

【解决方案1】：

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

示例：

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

或者，

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

【讨论】：

谢谢！ 10 分钟倒计时结束后，我会将此标记为答案。再次感谢。 :)

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：