Изменить цвет изображения с помощью 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

Использовать ngStyle с конкатенацией:

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

Демо

Answer 2

В атрибуте style я думаю, что вам не хватает ; между непрозрачностью и тенью:

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