Angular6 ngStyle 动态应用样式

Question

我正在使用 angular6 并尝试通过 angular table 中的内联样式来实现背景颜色。如果我对这些值进行硬编码，背景颜色会改变，但如果我尝试将其通过变量进行设置，它会保持不变。

模板：

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

note not used (-) here instead of use camelcase style

 [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

如果你想给背景颜色赋变量（selectedElementColor）值，你可以按如下方式进行

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

如果您根据条件分配此值，那么您可以按如下方式使用条件

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

确保您使用的是属性 backgroundColor 而不是 background-color。

Answer 3

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

第service.ts页::

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

Angular6 ngStyle 动态应用样式

Angular6 ngStyle to apply style dynamically

styling

angularjs

ng-style

angular

angular6