问题
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 }} + ')'}">
回答1:
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(){
}
}
You can see the example in this Plunker. Enjoy.
回答2:
Don't use []
and {{}}
together, it's either the one or the other:
<div class="table-wrap featuredimg" [ngStyle]="{'background-image': 'url(' + project.projectimage + ')'}">
See also In RC.1 some styles can't be added using binding syntax
回答3:
Just to build on top of Gunter's answer, this works with the async pipe as well.
<div md-card-avatar class="profile_header"
[ngStyle]="{'background': 'url(' + (usergravatar$ | async) + ')'}"></div>
来源:https://stackoverflow.com/questions/37491166/angular-2-background-image-into-a-html-file-using-ngstyle