Атрибут стиля печати динамически с Angular 6

Question

Я пытаюсь отобразить дерево турниров:

Изначально у меня много подобных:

<div class="match-wrapper"
           style="top:  {{ match['matchWrapperTop'] }}px; left:  {{ match['matchWrapperLeft']  }}px; width: {{matchWrapperWidth}}px;">

Но я получаю:

WARNING: sanitizing unsafe style value top: -72px; left: 168px; height: 54px; (see http://g.co/ng/security#xss).

Теперь я попытался изменить это так:

<div class="match-wrapper"
           [ngStyle]="{top: match['matchWrapperTop'], left: match['matchWrapperLeft'], width: matchWrapperWidth}">

Но теперь у меня есть:

Cannot find a differ supporting object

И эта ошибка гораздо менее явная ...

Что мне делать ???

Answer 1

Не видя полного примера, это сложно сказать. Исходя из кода, которым вы поделились выше, и Angular docs , похоже, что вам нужно следующее:

[style.top.px]="match['matchWrapperTop']"

Answer 2

Простой стиль привязки

Отлично подходит для одного значения

<div class="match-wrapper" [style.top.px]="match['matchWrapperTop']" [style.left.px]="match['matchWrapperLeft']" [style.width.px]="match['matchWrapperWidth']">
  Lorem Ipsum
</div>

Использование директивы ngStyle

Лучший вариант для привязки нескольких свойств CSS

<div class="match-wrapper" [ngStyle]="{'top.px' : match['matchWrapperTop'],'left.px' : match['matchWrapperLeft'],'width.px' : match['matchWrapperWidth']}">
  Lorem Ipsum
</div>

С содержанием TS

export class AppComponent  {
  match = {};

  constructor() {
      this.match['matchWrapperTop'] = 10
      this.match['matchWrapperLeft'] = 10
      this.match['matchWrapperWidth'] = 100
  }
}