从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;
}