Интерполяция внутри фонового изображения ngStyle

Я просмотрел похожие ответы, найденные в stackoverflow, но не повезло. Как я могу правильно использовать интерполяцию внутри ngStyle для фонового изображения?

Это код, который я использую:

<div mat-card-avatar class="header-image" ngStyle = "{'background-image': 'url(' + {{cardData.image}} + ')'}"></div>

Я получаю сообщение об ошибке: не удается найти другой вспомогательный объект '{'background-image': 'url(' + ../../assets/image/photo.png + ')'}' в .....


angular background-image string-interpolation ng-style
person jxStackOverflow    schedule 17.07.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы не можете использовать интерполяцию внутри ngStyle, вы должны использовать [ngStyle]="{'background-image': 'url(' + cardData.image + ')'}"

Попробуйте так:

<div mat-card-avatar class="header-image" [ngStyle]="{'background-image': 'url(' + cardData.image + ')'}">
person Adrita Sharma    schedule 17.07.2019

arrow_upward
0
arrow_downward

Попробуйте заключить атрибуты ngStyle в квадратные скобки:

[ngStyle]="...
person Michał Tkaczyk    schedule 17.07.2019

arrow_upward
0
arrow_downward 

[ngStyle]="'{background-image: url(' + {{cardData.image}} + ')}'"

не уверен, возможно ли это вообще, однако это было бы правильно для кавычек

person Tom Edwards    schedule 17.07.2019