动态添加div属性值

Question

我想在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>

我有一个错误：

未捕获的错误:模板分析错误:无法绑定到“code ”,因为它不是“div”的已知属性。(" *ngFor="let e of etats。_ embedded . Etats " style = " background:{ { e . codecouleur } }！重要；“[错误-

Answer 1

您试图实现的是属性绑定。正如官方文件所说：

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

所以，根据这一点，你需要稍微改变一下代码。对于样式，你可以使用ng样式或[style.background]，但是！重要的在里面不起作用：

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

Answer 2

您有以下几种选择：

1. <代码>

Answer 3

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

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