Angular6 ngStyle для динамического применения стиля

Question

Я использую angular6 и пытаюсь реализовать цвет фона с помощью встроенных стилей в угловой таблице.Если я жестко закодирую значения, цвет фона изменится, но если я попытаюсь поместить его через переменную, он останется прежним.

Шаблон:

<ng-container matColumnDef="color">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> color </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{'background-color':'#element.color'}"> #{{element.color}} </td>
</ng-container>

Answer 1

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

public bgcolor = "red";

примечание не используется (-) здесь вместо использования стиля верблюда

 [style.backgroundColor]="bgcolor"

второй способ, используемый таким образом для нескольких

public bgcolor = {
    backgroundColor:"orange"
};

[ngStyle]="bgcolor"

для вашего стиля, используемого таким образом

[ngStyle]="{ backgroundColor:'#' + element.color }"



<ng-container matColumnDef="color">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> color </th>
  <td mat-cell *matCellDef="let element" [ngStyle]="{ backgroundColor:'#' + element.color }" > #{{element.color}} </td>
</ng-container>