使用 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

Simple style binding

非常适合单值

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

Using ngStyle directive

多个 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
  }
}

Answer 2

在没有看到完整示例的情况下，很难说清楚。根据您在上面共享的代码和 Angular docs，您似乎需要以下内容：

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

使用 Angular 动态打印样式属性 6

printing style attribute dynamically with Angular 6

angular

angular6