Question

我使用Angular 2服务从API中提取数据..我可以使用与此{{project.title}}类似的内容将json api中的所有内容输出到页面上但是我希望将url输出到后台图像，我似乎无法让它工作..有没有人有任何想法或建议？

目前这就是我所拥有的。我没有花括号也尝试过，但没有任何效果。

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

Answer 1

你不需要使用{{}}来打电话，而不是你在指令中使用，比如：

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(){
  }
}

您可以在此Plunker中看到该示例。享受。

Answer 2

不要同时使用[]和{{}}，而是使用其中一个：

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

另见In RC.1 some styles can't be added using binding syntax

Answer 3

只是建立在Gunter的答案之上，这也适用于异步管道。

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

Angular 2 - 使用ngStyle将背景图像转换为html文件

3 个答案: