angular2 MDL事件卡ngFor应用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+')'"....> 

其中图像是图像产品特性，确实如此。