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

【问题标题】：printing style attribute dynamically with Angular 6使用Angular 6动态打印样式属性
【发布时间】：2018-06-27 04:38:01
【问题描述】：

我正在尝试显示锦标赛树：

最初，我有很多喜欢：

<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

而且这个错误不那么明显......

我该怎么办？？？

【问题讨论】：

标签： angular angular6

【解决方案1】：

如果没有看到完整的示例，这有点难以判断。根据您在上面共享的代码和Angular docs，您似乎需要以下内容：

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

【讨论】：

它似乎在工作，但我仍然有消息：找不到不同的支持对象
请用match 对象的样子更新您的问题。
别打扰，好像是chrome的错误，chrome重启后就没有这个消息了。谢谢！！！

【解决方案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
  }
}

【讨论】：