动态添加 div 属性值答案

【问题标题】：Add div attributes value dynamically动态添加 div 属性值
【发布时间】：2019-02-06 06:03:30
【问题描述】：

我想在 Angular 7 中动态添加 div 属性。

我试过这个：

<div *ngFor="let e of etats._embedded.etats" 
style="background: {{e.codeCouleur}} !important;"  
data-code="{{e.id}}" data-bg={{e.codeCouleur}}>{{e.nom}"</div>

我有这个错误：

未捕获的错误：模板解析错误： 无法绑定到“代码”，因为它不是“div”的已知属性。 (" *ngFor="let e of etats._embedded.etats" style="background: {{e.codeCouleur}} !important;" [ERROR ->]data-code="{{e.id}}" 数据-bg={{e.codeCouleur}}>{{e.nom}"

【问题讨论】：

我正在使用 angular7
用这个{{e.nom}}代替{{e.nom}"
使用[attr.data-code]="e.id"和[attr.data-bg]="e.codeCouleur"代替data-code="{{e.id}}" data-bg="{{e.codeCouleur}}"
感谢@CruelEngine，它的作品。但是我该如何解决 style="..." ？
[style.background]="e.codeCouleur"

标签： angular typescript angular7

【解决方案1】：

当你动态循环时，你应该使用这样的东西：

<div *ngFor="let e of etats._embedded.etats" 
     [style.background]="e.codeCouleur"
     [data-code]="e.id" 
     [data-bg]=e.codeCouleur
>{{e.nom}}"</div>

【讨论】：

【解决方案2】：

你有几个选择：

<div attributeName="{{attributeValue}}"/></div>
<div [attr.attributeName]="attributeValue"/></div>
<div [attr.attributeName]="getAttributeValueFun()"/></div>

【讨论】：

【解决方案3】：

您要实现的目标称为Attribute Binding。正如官方文档所说：

当没有元素属性时必须使用属性绑定绑定。

因此，据此，您需要稍微更改代码。对于style，您可以使用ngStyle 或[style.background]，但!important 在其中不起作用：

<div *ngFor="let e of etats._embedded.etats" 
  [ngStyle]="{'background': e.codeCouleur}"  
  [attr.data-code]="e.id" [attr.data-bg]="e.codeCouleur">{{e.nom}}</div>

【讨论】：