使用ngStyle更改图像的颜色

Question

我很抱歉，如果这个问题听起来很天真，但我是Angular 5的新手。我需要根据我从JSON响应中获得的颜色代码来更改图像的颜色。我搜索但我只发现了如何改变背景颜色。我找不到任何例子。

以下是我的json回复片段：

{"medDetailsEve":{"color":"#800000","medDate":"04/27/2018","medTime":"20:00","medId":"PE16","sequence":"EVEN","shape":"2","status":""}}

以下是我正在尝试的代码

<img src="./assets/img/tab/{{data.shape}}.png" style="-webkit-filter: opacity(.5) drop-shadow(0 0 0 {{data.color}}) class="pill-img">"

Answer 1

在样式属性中，我认为你在不透明度和阴影之间缺少;：

style="-webkit-filter: opacity(.5); drop-shadow(0 0 0 {{data.color}})"

Answer 2

使用连接的ngStyle：

<img ... [ngStyle]="{'-webkit-filter': 'opacity(.5) drop-shadow(0 0 0 '+data.color}">

Demo