angular - Hur lägger man till bakgrundsbild med ngStyle?

Jag försöker fylla flera kort enligt följande:

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

Här tillämpas CSS dynamiskt, det vill säga bakgrundsfärgen ändras till ljusgrå. Men det jag egentligen vill är att tillämpa background: url(-- här vill jag ha product.img --) där varje objekt i mitt objektarraymallar har egenskapen img som innehåller URL.

Hur kan jag uppdatera mitt uttalande i så fall?

Svar #1

Du kan ställa in det som följande:

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

där bild är produktens egenskap för bild, verkligen.

Relaterade artiklar