Angular 2 - 使用 ngStyle 将背景图像转换为 html 文件 [英] Angular 2 - background image into a html file using ngStyle

问题描述

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

I am pulling data from an API using an Angular 2 service.. I can output everything from the json api onto the page using something similar to this {{ project.title }} however i wish to output the url to a background image and I cant seem to get it working.. has anyone got any ideas or advice ?

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

Currently this is what I have. I've tried it without the curly braces also but nothing is working.

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

推荐答案

你不需要使用 {{}} 来调用一些比你放在指令中的属性，像这样:

You don't need use {{}} for call some propiety than you put in a directive, like this:

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 中查看示例.享受.

You can see the example in this Plunker. Enjoy.

这篇关于Angular 2 - 使用 ngStyle 将背景图像转换为 html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！