Propriété d'attribut de liaison fond-url de l'image dans Angulaire 2

J'ai eu du mal à trouver le meilleur moyen de changer dynamiquement la background-image attribut dans un certain nombre de Angulaire 2 composants.

Dans l'exemple suivant, je suis tenté de mettre le background-image d'un div pour un @Input valeur à l'aide de [ngStyle] directive:

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

Je ne pense pas que le problème est avec le observables, depuis username affiche et de faire quelque chose comme <img *ngIf="image" src="{{ image }}"> rend l'image. - Je accès à la background-image attribut parce qu'apparemment c'est le meilleur moyen de faire une image circulaire, mais en général voudrais savoir comment faire cela.

EDIT:

Mon original [ngStyle] déclaration était inutile accolades (ngStyle est une directive que peut prendre une variable), et manquait de la chaîne des balises autour de url() et image. La manière correcte est (comme spécifié ci-dessous) est:

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

Comme a déclaré dans l'original edition, une solution peut également être réalisé avec l' Convertisseur classe Angulaire 2. Je n'ai pas encore le faire, mais pense qu'il devrait y avoir un moyen avec setElementStylesou quelque chose comme ça. Je vais essayer de poster un exemple, mais j'aimerais si quelqu'un d'autre m'a montré (et d'autres) comment pour le moment.

OriginalL'auteur pingo | 2016-06-01