Динамический CSS-стиль в Angular - PullRequest
Новая
       46

Динамический CSS-стиль в Angular

0 голосов
/ 21 декабря 2018

Прежде всего, я получил список с предметами в нем.Я перебираю этот список, чтобы заполнить таблицу (ngFor).Теперь у меня есть множитель, который определяет, сколько отступов имеет каждый tr.Как у первого уровня 0, у второго - 10 и т. Д.

Есть ли способ сделать это в ngFor с помощью элемента из списка?Вот так: 

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

Я знаю, что приведенный выше код не работает и что это так: 

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

Я также попробовал выше и просто умножить его, но это не такРабота.Я мог бы добавить новый атрибут к элементу, в котором я храню количество отступов, но я хотел бы рассчитать его в виде.

Спасибо, что нашли время и помогли мне.

Привет Нико ака.Myridor

1 Ответ

0 голосов
/ 21 декабря 2018 
<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

...