angular - 如何使用 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+')'"....>

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