Стиль не устанавливается при возврате строки из функции для ngStyle

#angular

#угловой

Вопрос:

Я пытаюсь установить стили для контейнера div, используя тег ngStyle. Конечная цель — интерполировать на основе свойств 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;
  }
  

Ответ №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;
}