在下面的示例中,我尝试使用[ngStyle]指令将div的background-image设置为@Input值：

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

我认为问题不在于observable,因为用户名显示并执行类似< img * ngIf =“image”src =“{{image}}”>渲染图像.我必须访问backgroung-image属性,因为显然这是制作圆形图像的最佳方式,但通常想知道如何做到这一点.

编辑：

我原来的[ngStyle]声明有不必要的花括号(ngStyle是一个可以带变量的指令),并且在url()和image周围缺少字符串标签.正确的方法是(如下所述)：

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

正如原始编辑中所述,也可以使用Angular 2中的Renderer类来实现解决方案.我还没有这样做,但是认为setElementStylesor应该有这样的方法.我会尝试发布一个例子,但是如果有人向我(以及其他人)展示了如何暂时如此,我会很高兴.