angular - 绑定(bind)表达式不能包含链式表达式(Angular 8)

Question

我需要在其他浏览器支持中添加 -webkit 和 -moz

[ngStyle]="{'transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'}; 
{'-webkit-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'}; 
{'-moz-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'};
{'-ms-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'};
{'-o-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'};"

但是，上面的代码抛出了一个错误:

Uncaught Error: Template parse errors:
Parser Error: Binding expression cannot contain chained expression at column 71 in ...

摆脱这种情况的可能解决方案是什么？

只有当我有一个值时它才有效:

[ngStyle]="{'transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)'};"

Answer 1

您希望将所有样式绑定(bind)放在一个对象中，而不是为每种样式创建一个新对象，例如:

[ngStyle]="{
  'transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)',
  '-webkit-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)',
  '-moz-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)',
  '-ms-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)',
  '-o-transform': 'rotate(' + ((result.percentage * 1.8) - 90) + 'deg)',
}"