angular – 动态更改img [src]

发布时间：2020-12-17 07:06:47 所属栏目：安全来源：网络整理

导读：我有包含记录列表的组件 export class HomeComponent implements OnInit{ public wonders: WonderModel[] = []; constructor(private ms: ModelService){ ms.wonderService.getWonders(); this.wonders = ms.wonderService.wonderList; } ngOnInit(){}} this

我有包含记录列表的组件

export class HomeComponent implements OnInit{

    public wonders: WonderModel[] = [];

    constructor(private ms: ModelService){
        ms.wonderService.getWonders();
        this.wonders = ms.wonderService.wonderList;
    }

    ngOnInit(){}
}

this.wonders返回这样的值数组

array of this.wonders

我试图像这样动态地获取图像源的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}}.jpg]中的第14列.”

任何人都可以提出任何可能的解决方案,提前谢谢.

解决方法

你可以这样做：

[src]='"assets/images/"+wonder.id+".jpg"'

要么

src='assets/images/{{wonder.id}}.jpg'

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!