相关疑难解决方法(0)

Angular 2 rc3

我试图动态添加calc()到模板中的元素.我有类似的东西.

template : `<div attr.style.width="{{width}}></div>"`

export myClass
{
    @Input() myInputObject:any;
    private width:string;


   ngOnInit() { this.setWidth()}

   private setWidth()
   {
       let percent = myInputObject.percent;
       this.width =  'calc(' + percent + '% - 20px)';
   }
}

如果我使用括号,则输出在DOM中看起来像这样.

<div style="unsafe"></div>

如果我拿出括号它可以工作(有点)它看起来像这样.

<div style="calc10% - 20px"></div>

这也行不通.

<div attr.style.width="calc({{width}} - 20px)">

任何有关如何添加calc()到模板的帮助非常感谢.注意我也尝试用(和替换括号).这又回来了"不安全".

示例:(rc1)

我在我的环境中使用rc3.但我能够在plunker中重现RC1的相同问题.我假设这是一个安全的事情.但必须有一种方法可以添加calc()到样式属性.也许还有比这更好的方法？

https://plnkr.co/edit/hmx5dL72teOyBWCOL0Jm?p=preview