I have a component that contains a list of records.
export class HomeComponent implements OnInit {
public wonders: WonderModel[] = [];
constructor(private ms: ModelService){
ms.wonderService.getWonders();
this.wonders = ms.wonderService.wonderList;
}
ngOnInit(){}
}
The values returned by this.wonders look like the array shown in this
https://i.sstatic.net/UNopG.jpg.
I'm attempting to dynamically set the image source based on the id value 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>
However, I encountered the following error:
Parser Error: Got interpolation ({{}}) where expression was expected at column 14 in [assets/images/{{wonder.id}}.jpg].
Could someone please suggest a possible solution for this issue?