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

【问题标题】：Angular 7 Set Background Image from API dataAngular 7从API数据设置背景图像
【发布时间】：2020-04-01 15:07:42
【问题描述】：

我有几张卡片，它们从 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 获取数据的卡片设置背景图像

【问题讨论】：

标签： angular

【解决方案1】：

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

试试这样：

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

Working Demo

【讨论】：

【解决方案2】：

您缺少的是添加动态 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 }"

【讨论】：

不确定我是否理解。我在项目中使用 scss。你能详细说明一下吗？
您在上面的代码中有错误。您还需要在 url 之后添加 + 号。
@GavinWood 在角度中，您可以使用动态 css 类。假设您想根据 Angular 中的某些条件动态添加一个 css 类，这取决于 API 数据？您可以使用[ngStyle] 或ngClass 来完成它，同时传递这样的条件<div [ngClass]="{ 'class1': condition, 'class2': !condition }">