Question

我正在尝试将多张卡片填充如下：

<mdl-card *ngFor="let product of templates" class="demo-card-event" mdl-shadow="2" [ngStyle]="{ 'background-color': 'lightgray' }">
    <mdl-card-title mdl-card-expand>
        <h4>
            {{product.name}}
        </h4>
    </mdl-card-title>
    <mdl-card-actions mdl-card-border>
        <button mdl-button mdl-colored mdl-ripple (click)="booknow()">
            Show
        </button>
        <mdl-layout-spacer></mdl-layout-spacer>
        <mdl-icon>event</mdl-icon>
    </mdl-card-actions>
</mdl-card>

这里css动态应用，即背景颜色变为lightgrey。然而我真正想要的是应用background: url(-- here I want product.img --)在我的对象数组模板中，每个对象都有属性img，其中包含url。

在这种情况下，如何更新我的陈述？

Answer 1

您可以将其设置为以下内容：

<div ...[ngStyle]="{background: 'url('+ product.image+')'"....>

其中image确实是图像的产品属性。</ p>

如何使用ngStyle添加背景图像？

1 个答案: