Angular9内联样式插值不生效且报错该如何解决？

Angular 的 [ngStyle] 属于属性绑定语法，引号包裹的内容本身会被模板解析器识别为动态表达式，不需要也不允许嵌套使用 {{}} 插值语法。两种绑定语法混合使用时，解析器会在预期读取表达式的位置识别到无效的插值标记，就会抛出你收到的报错。

你可以选择以下任意一种写法实现需求：

• 直接在表达式内拼接单位，去掉插值符号：

<!-- 写法1：用模板字符串拼接 -->
<div [ngStyle]="{ 'width': `${object.value}%` }"></div>

<!-- 写法2：用加号拼接 -->
<div [ngStyle]="{ 'width': object.value + '%' }"></div>

• 用更简化的单样式绑定语法，不需要调用ngStyle指令：

<!-- 直接绑定width属性并指定百分比单位，Angular会自动处理单位拼接 -->
<div [style.width.%]="object.value"></div>

内容的提问来源于stack exchange，提问作者mevr