Issue
I have component which have list of records
export class HomeComponent implements OnInit {
public wonders: WonderModel[] = [];
constructor(private ms: ModelService){
ms.wonderService.getWonders();
this.wonders = ms.wonderService.wonderList;
}
ngOnInit(){}
}
this.wonders returns array of values like this
I am trying to get that id value to image source dynamically like this
<div class="img-content" *ngFor="let wonder of wonders">
<header class="img-content-header">
<div style="width: 45px; display: table-cell;"> <img [src]='assets/images/{{wonder.id}}.jpg' height="40px" width="40px"> </div>
<div style="display: table-cell;">
<div>{{wonder.name}}</div>
</div>
</header>
</div>
While doing so I am getting this error
Parser Error: Got interpolation ({{}}) where expression was expected at column 14 in [assets/images/{{wonder.id}}.jpg]
Can anyone suggest any possible solution for that.
Solution
You need to bind like this
<img src='{{ "assets/images/" + wonder.id + ".jpg" }}'
[]
is not compatible with {{ }}
.
Answered By - Suren Srapyan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.