来自API数据的角7集背景图像

Question

我有几张卡，它们从API中提取数据，然后在数据上循环以显示前端的卡片。每一张卡都有一个与它相关的图像，我想把它设置为每一张特定卡的背景图像。

<div *ngFor ='let package of packages; let i = index' [attr.data-index]="i">
     <div class="card"> 

        <div class="card-header" style="background-image:url("{{packages[i].destinations.image}}")">{{packages[i].destinations.destname}}</div>
        <div class="price">{{packages[i].destinations.hotelrating}}</div> 

     </div>
 </div>

这显然是行不通的。我在论坛上搜索，但找不到任何方法显示如何处理从API获取数据的卡的设置背景图像。

Answer 1

您缺少的是添加一个动态CSS样式属性。Angular支持在运行时向任何元素添加动态CSS样式属性。为此，您可以使用以下安排之一：

<div [ngStyle]="{background: 'url('+ packages[i].destinations.image + ')'}"></div>

或

<div [style.background]="'url('+ packages[i].destinations.image + ')'"></div>

否则，如果您想要添加动态css类，取决于您可以在下面使用的条件：

<div [ngClass]="{ 'class1': condition, 'class2': !condition }"

Answer 2

您可以使用[ngStyle]动态设置图像。

就像这样：

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

工作演示