我正在使用 Angular 2 服务从 API 中提取数据。我可以使用类似于 {{project.title }} 的内容将 json api 中的所有内容输出到页面上,但是我希望将 url 输出到后台图像,我似乎无法让它工作..有人有任何想法或建议吗?
目前这就是我所拥有的。我也尝试过不使用花括号,但没有任何效果。
<div class="table-wrap featuredimg" [ngStyle]="{'background-image': 'url(' + {{ project.projectimage }} + ')'}">
最佳答案
您不需要使用 {{}} 来调用某些属性,而是放入指令中,如下所示:
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 中查看示例。享受吧。
关于Angular 2 - 使用 ngStyle 将背景图像转换为 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37491166/