如何用ngStyle添加背景图像？

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被动态地应用，即背景颜色变化为轻灰色。然而，我实际上想要的是应用background: url(-- here I want product.img --)，在我的对象数组模板中，每个对象都有包含url的属性img。

在这种情况下我怎样才能更新我的声明？

Answer 1

您可以将其设置为：

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

其中图像实际上是图像的产品属性。