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

简单样式绑定

非常适合单值

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

Answer 2

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

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

Angular 6动态打印样式属性

2 个答案: