使用方法角4的动态样式

Question

我正在构建一个角度为4的树结构。我的问题是我必须在同一级别启动每个节点，并仅从左边框缩进名称文本。 对于每个节点，我都有节点的深度。我想添加这样的风格。

<p   style="padding-left : calc_padding(depth)"> some Text </p>

calc_padding(depth){
return depth *5
}

我该怎么做。

我已阅读风格消毒剂，但在我的情况下找不到如何使用它。

我试图恭维[style] = "method(depth)" 和[style.padding-left] = "method(depth)"但我无法按照自己的意愿完成任务。

在这方面的任何帮助将不胜感激。

Answer 1

你必须使用这样的样式绑定：

<p [style.paddingLeft.px]="calc_padding(depth)"></p>

如果从calc_padding返回的值应解释为像素

Answer 2

您可以使用 ngStyle

试试这个

<p [ngStyle]="getStyle(20)"> some Text </p>

在组件中：

calc_padding(depth){
  let returnData = {};
  returnData['padding-left'] = depth *5;
  return returnData;
}