Angular中的动态CSS样式

时间:2018-12-21 10:34:08

标签: css angular dynamic styling

首先,我得到了一个包含物品的清单。我遍历该列表以填充一个表(ngFor)。现在,我有一个乘法器,用于确定每个tr有多少填充。像第一层有0个填充,第二层有10个,等等。

在ngFor中,是否有一种方法可以从列表中的某项上做到这一点? 像这样:

<tr>
   <td style="padding-left: 10px * {{ item.MultiplyLevel }}></td>
</tr>

我知道上面的代码不起作用,并且是这样的:

[style.padding-left.px]="10"

我也尝试了上面的方法,只是将其相乘,但是没有用。我可以向其中存储填充量的项目添加一个新属性,但我希望在视图中对其进行计算。

感谢您抽出宝贵的时间来帮助我。

问候Nico又名。迈里德(Myridor)

1 个答案:

答案 0 :(得分:1)

<div *ngFor="let a of ar">
  <span [style.padding-left.px]="[ 10 * a]">aaaa</span>
</div>

其中 ar 只是保存偏移量的常见数组。

ar = [1,3,5];

Stackblitz:https://stackblitz.com/edit/angular-rs1csq