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

如果要为背景色分配变量（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动态地应用样式

3 个答案: