css - Angular 中的动态 CSS 样式

Question

首先我得到了一个包含元素的列表。我循环遍历该列表以填充表格 (ngFor)。现在我有一个乘数，它确定每个 tr 有多少填充。就像第一级有 0 个填充第二个有 10 等。

有没有办法在 ngFor 中从列表中的元素中做到这一点？像这样:

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

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

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

我也试过上面的方法，只是把它相乘，但没有用。我可以向存储填充量的元素添加一个新属性，但我想在 View 中计算它。

Answer 1

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

其中 ar 只是一个保存偏移量的普通数组。

ar = [1,3,5];

堆栈 Blitz :https://stackblitz.com/edit/angular-rs1csq