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>

Answer 2

<span  [ngStyle]="{'background-color': item.color}"> </span>

страница service.ts::

  return {
    'toolbarTitle': 'My Pins',
    'items': [
        {
            'id': 1,
            'color' : 'red',
        },
    ]
};

Answer 3

Если вы хотите присвоить значение переменной (selectedElementColor) цвету фона, вы можете сделать следующее

[ngStyle]="{'backgroundColor': selectedElementColor}"

Если вы назначаете это значение на основе условия, вы можете использовать условие следующим образом

[ngStyle]="value === selectedValue && {'backgroundColor': selectedElementColor}

Убедитесь, что вы используете свойство backgroundColor, а не background-color.