css - Angular 中的动态 CSS 样式

标签 css angular dynamic styling

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

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

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

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

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

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

最佳答案

<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

关于css - Angular 中的动态 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53883219/

相关文章:

javascript - 移动设备上的多级菜单,链接内的图标上有 touchstart

Angular 5 Injector - 如何注入(inject)字符串

html - 如何使字体 "Lucida Sans Unicode"在 IE9 和 Chrome 中以相同的方式呈现?

javascript - 在 Angular4(typescript) 中实现 zimJS

Angular2 时钟选择器

jquery - 无法重新初始化数据表 - 数据表的动态数据

javascript - 如何在 javascript on() 函数中指定动态元素?

java - 配置 Hibernate 以使用数据库,其名称在运行前未知

css - 跨浏览器 CSS 整洁的解决方案建议?

jquery - 如何获得带有 prev 和 next 截断的轮播