减去 [ngStyle] 角度 6 内的变量答案

【问题标题】：Subtract variables inside [ngStyle] angular 6减去 [ngStyle] 角度 6 内的变量
【发布时间】：2019-11-20 22:52:46
【问题描述】：

我正在通过在我的 [ngStyle] 指令中减去变量 regOtValue 和 endTimeOverTimeOut 来使我的进度条的 width 样式属性动态化。但它总是抛出空白或插值错误（通过在[ngStyle]中添加{{ }}）

这是我正在做的事情：

 [ngStyle]="{'width': (getAttendance.regOtValue - getAttendance.attendance[getAttendance.findIndex].endTimeOverTimeOut) + '%', 'background-color': '#63B3EA'}"

请帮助我跟踪我的发展。

提前谢谢你！

【问题讨论】：

使用style=" width: {{ (getAttendance.regOtValue - getAttendance.attendance[getAttendance.findIndex].endTimeOverTimeOut) + '%;' }} background-color : #63B3EA "
这个方法会抛出一个警告：WARNING: sanitizing unsafe style value width: -5.763888888888889%;;背景颜色：#63B3EA

标签： javascript angular typescript dom

【解决方案1】：

尝试从如下方法返回一个值：

.ts 文件内：

getWidth() {
 return (this.getAttendance.regOtValue - this.getAttendance.attendance[getAttendance.findIndex].endTimeOverTimeOut).toString() + '%';
}

在你的模板中：

 [ngStyle]="{'width':getWidth(), 'background-color': '#63B3EA'}"

【讨论】：