我有包含记录列表的组件
export class HomeComponent implements OnInit {
public wonders: WonderModel[] = [];
constructor(private ms: ModelService){
ms.wonderService.getWonders();
this.wonders = ms.wonderService.wonderList;
}
ngOnInit(){}
}
我试图像这样动态地获取图像源的id值
<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>
这样做的同时我收到了这个错误
解析器错误:插值({{}})其中表达式位于[assets / images / {{wonder.id}}中的第14列.jpg]
任何人都可以建议任何可能的解决方案。
你可以这样做:
[src]='"assets/images/"+wonder.id+".jpg"'
要么
src='assets/images/{{wonder.id}}.jpg'
您在该部分中使用插值和属性绑定
[src]='assets/images/{{wonder.id}}.jpg'
您可以删除属性绑定
src='assets/images/{{wonder.id}}.jpg'
或删除插值
[src]='assets/images/' + wonder.id + '.jpg'
它的插值,所以你不需要从后端打字稿创建完整路径所需的[]
并分配它,所以只需删除[]
将适合你
<img src='assets/images/{{wonder.id}}.jpg' height="40px" width="40px">
[]
是有用的,当你绑定完整的vaule,所以来自typescript,例如
<img [src]='path' height="40px" width="40px">
在类型脚本中,您有路径变量
const path = 'imagepath.jpg';
你需要像这样绑定
<img src='{{ "assets/images/" + wonder.id + ".jpg" }}'
[]
与{{ }}
不兼容。