Angular 7 从 API 数据设置背景图像

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 }"