动态添加div属性值

时间:2019-02-06 06:03:30

标签: angular typescript angular7

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

我尝试过:

<input value="emails" type="text" name="admin[emails][general]" id="admin_emails_general">

我有这个错误:

  

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

3 个答案:

答案 0 :(得分:3)

动态循环时,应使用以下内容:

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

答案 1 :(得分:3)

您几乎没有选择:

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

答案 2 :(得分:2)

您要实现的目标称为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>