从ngStyle的函数返回字符串时未设置样式

Question

我正在尝试使用ngStyle标签设置div容器的样式。最终目标是基于box的属性进行插值，但是我甚至不能在从getStyle函数返回样式时使用静态字符串来设置样式。

我已经尝试了在ng风格的参数中能想到的每种组合。

<div class="bounding-box"  *ngFor="let boxs of bList [ngStyle]="getStyle(boxs)" ></div>

getStyle = (box) => {
    var boxStyle = "{'height.px': 30','width.px': '30','background-color': 'red','left.px': '30','top.px': '30',opacity: '0.20'}";
    return boxStyle;
  }

Answer 1

该函数返回一个包含对象结构的字符串，将其替换为一个对象，因为NgStyle接受键值配对的对象。

getStyle = (box) => {
  var boxStyle = {'height.px': 30','width.px': '30','background-color': 'red','left.px': '30','top.px': '30',opacity: '0.20'};
  return boxStyle;
}