Связывание свойств атрибута для URL-адреса background-image в Angular 2

Я изо всех сил пытался выяснить лучший способ динамического изменения атрибута background-image в ряде компонентов Angular 2.

В следующем примере я @Input установить для background-image of div значение @Input с [ngStyle] директивы [ngStyle]:

import {Component, Input} from '@angular/core';
import { User } from '../models';

// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;

@Component({
  selector: 'profile-sidenav',
  styles: [ '
    .profile-image {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  '],
  template: '  
    <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
    <h3>{{ username }}</h3>
  '
})

export class ProfileSidenav {
  @Input() user: UserInput;
  blankImage: string = '../assets/.../camera.png';

  // utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app) 
  get username() {
    return this.user.username;
  }
  get image() {
    if (!this.user.image) { return this.cameraImage;
    } else { return this.user.image; }
  }

Я не думаю, что проблема связана с наблюдаемым, так как username отображает и делает что-то вроде <img *ngIf="image" src="{{ image }}"> отображает изображение. Мне нужно получить доступ к атрибуту background-image потому что, очевидно, это лучший способ сделать круглое изображение, но в целом хотелось бы знать, как это сделать.

РЕДАКТИРОВАТЬ:

Мое оригинальное объявление [ngStyle] содержало ненужные фигурные скобки (ngStyle - директива, которая может принимать переменную), и в нем отсутствовали строковые теги вокруг url() и image. Правильный путь (как ответ ниже):

<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>'.

Как указывалось в исходном редактировании, решение также может быть достигнуто с помощью класса Renderer в Angular 2. Я еще не сделал этого, но думаю, что должен быть способ с setElementStyles или что-то в этом роде. Я постараюсь опубликовать пример, но мне бы очень понравилось, если бы кто-то еще показал мне (и другим), как это сделать в данный момент.

Ответы

<div class="profile-image"
     [ngStyle]="{ 'background-image': 'url(' + image + ')'}">

<div class="profile-image" [ngStyle]="{ 'backgroundImage': url({{image}})">