Attributeigenschaftenbindung für Hintergrundbild-URL in Angular 2

Ich habe mich bemüht, den besten Weg zu finden, um das background-image -Attribut in einer Reihe von Angular 2-Komponenten dynamisch zu ändern.

Im folgenden Beispiel versuche ich, die background-image einer div mit @Input directive auf einen [ngStyle] -Wert zu setzen:

Ich glaube nicht, dass das Problem mit dem Observablen zusammenhängt, da username anzeigt und etwas wie <img *ngIf="image" src="{{ image }}"> das Bild rendert. Ich muss auf das backgroung-image -Attribut zugreifen, weil das anscheinend der beste Weg ist, ein zirkuläres Bild zu machen, aber im Allgemeinen würde ich gerne wissen, wie man das macht.

BEARBEITEN:

Meine ursprüngliche [ngStyle] -Deklaration hatte unnötige geschweifte Klammern (ngStyle ist eine Direktive, die eine Variable aufnehmen kann) und es fehlten String-Tags um url() und image . Der richtige Weg ist (wie unten beantwortet):

Wie in der ursprünglichen Fassung angegeben, kann eine Lösung auch mit der erreicht werden Renderer Klasse in Angular 2. Ich muss es noch tun, aber denke, es sollte einen Weg geben mit setElementStyles oder so ähnlich. Ich werde versuchen, ein Beispiel zu geben, würde aber lieben, wenn jemand mir (und anderen) vorläufig gezeigt hätte.