Динамически добавлять значение атрибутов div

Question

Я хочу добавить атрибуты div динамически в Angular 7.

И я попробовал это:

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

И у меня есть эта ошибка:

Uncaught Error: Ошибки синтаксического анализа шаблона: Невозможно привязать к 'code', так как это не известное свойство 'div'.("* ngFor =" let e of etats._embedded.etats "style =" background: {{e.codeCouleur}}! важный; "[ERROR ->] data-code =" {{e.id}} "данные-bg = {{e.codeCouleur}}> {{e.nom} "

Answer 1

У вас есть несколько вариантов:

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

Answer 2

То, что вы пытаетесь достичь, называется Связывание атрибутов .Как говорится в официальном документе:

Вы должны использовать привязку атрибута, когда нет элемента для привязки.

Итак, в соответствии с этим вам необходимо изменить кодсовсем немного.Для 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>

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>