Angular 2 - Hintergrundbild in eine HTML-Datei mit ngStyle

Ich ziehe Daten aus einer API mit einem Angular 2-Dienst .. Ich kann alles aus der JSON API auf die Seite mit etwas ähnliches wie diese {{project.title} } aber ich möchte die URL zu einem Hintergrundbild ausgeben und ich kann nicht scheinen, dass es funktioniert .. hat jemand irgendwelche Ideen oder Ratschläge?Angular 2 - Hintergrundbild in eine HTML-Datei mit ngStyle

Derzeit ist das, was ich habe. Ich habe es auch ohne die geschweiften Klammern versucht, aber nichts funktioniert.

<div class="table-wrap featuredimg" [ngStyle]="{'background-image': 'url(' + {{ project.projectimage }} + ')'}">

Quelle

2016-05-27 Kravitz

nicht [] und {{}} zusammen Verwenden Sie, es ist entweder das eine oder das andere:

<div class="table-wrap featuredimg" [ngStyle]="{'background-image': 'url(' + project.projectimage + ')'}">

Siehe auch In RC.1 some styles can't be added using binding syntax

Quelle

2016-05-27 19:46:37

noch keine Freude mit, dass .. es gibt mir undefined – Kravitz

Ist es nur mir so oder ist jemand anderes mit kantigem 2 leicht desillusioniert zu werden ... es so viel verspricht, aber auch die banalsten Dinge erfordert so viele Schritte richtig zu bekommen – Kravitz

Sie nicht verwenden müssen {{}} für die Anruf einige propiety, als Sie in einer Richtlinie setzen, wie folgt aus:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
<div class="image" [ngStyle]="{'background-image':'url(' + object.link + ')'}"></div> 
    `, 
    styles: [` 
    .image{width:100px;height:100px; border: solid 1px black;} 
    `] 
}) 
export class AppComponent { 
    selectedColor:any = 0; 
    color; 

    object = { 
    link: "http://lorempixel.com/100/100" 
    } 

    constructor(){ 
    } 
}

Sie können das Beispiel in diesem Plunker sehen. Genießen.

Quelle

2016-05-27 20:26:47 Koronos

Oder übergeben Sie einfach Objekt an ngStyle wie: '[ngStyle] =" backgroundStyle "' – tomaszbak

Nur um auf Gunters Antwort aufzubauen, funktioniert das auch mit der asynchronen Pipe.

<div md-card-avatar class="profile_header" 
    [ngStyle]="{'background': 'url(' + (usergravatar$ | async) + ')'}"></div>

Quelle

2017-02-22 20:57:51 calbear47

Angular 2 - Hintergrundbild in eine HTML-Datei mit ngStyle

Antwort

Verwandte Themen