angular2 carte événement mdl ngFor application ngStyle pour ajouter l'image d'arrière-plan

Question

Je suis en train de remplir plusieurs cartes comme suit:

<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> 

Ici s'applique dynamiquement css à savoir les changements de couleur de fond gris clair. Cependant ce que je veux réellement est d'appliquer background: url(-- here I want product.img --) où dans mes modèles de tableau d'objet chaque objet a la propriété img qui contient l'URL. Comment puis-je mettre à jour ma déclaration dans ce cas?

Answer 1

Vous pouvez le définir comme suit:

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

où l'image est un produit bien pour l'image, en effet.