html - 如何在angular6的for循环中动态更改图像?
问题描述
我的html代码:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-12">
<ng-container *ngFor="let horizontal of categories">
<ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
<button [ngClass]="{'selected-color' : i==selectedIndex}" type="submit" class="btn1" [id]="horizontal.items[i].title" (click)="changeTrans(horizontal.items[i].title);changeColor(i)">
<img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
{{ horizontal.items[i].title }}
</button>
</ng-container>
</ng-container></div>
</div>
所以我的 component.ts 文件,
changeColor(i){
console.log(i);
this.selectedIndex = i;
}
我的CSS:
.selected-color{
background-color: orange;
color:white;
// background-image: url('./../../../../../assets/Trans_1.png');
}
所以在这里我可以更改所选按钮的颜色,但我还需要为不同的值更改不同的图像。在这里,如何为每个按钮 ID 动态更改我的图像?
基本上我想知道的是,如何为将要通过 for 显示的每个按钮动态更改图像。任何人都可以建议我实现它吗?
解决方案
替换下面的代码
<ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
经过
<img [attr.src]= "horizontalval.icon" alt="image not found" class="icon"/>
Edit
注意:对象horizontalval
应该具有icon
将具有path
的属性image
。
如果要更改整个图像的路径,则可以使用selectedIndex
.
<img [src]= "horizontal.items[selectedIndex].icon" class="icon"/>
编辑
<button [ngClass]="{'selected-color' : horizontal.items[i].selected}"
type="submit" class="btn1" [id]="horizontal.items[i].title"
(click)="changeTrans(horizontal.items[i].title);
changeColor(horizontal.items[i])">
<img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
{{ horizontal.items[i].title }}
</button>
ts
changeColor(item){
this.item.selected = true;
}
推荐阅读
- testng - 在场景方法 AbstractTestNGCucumberTests 中从命令行为 DataProvider 设置 (parallel = false/true)
- python - FastApi - 在正文请求中接收对象列表
- javascript - 如何获取传单中多边形的上下文菜单?
- sharepoint - 无法连接到 sharepoint 2013 中的现有服务器场
- redux - 当我使用 getServerSideProp 它使持久存储不起作用
- javascript - 如何在此 video-js 播放器上添加自动自适应比特率选项
- ruby - 显示 bash 的 Ubuntu 终端:/home/vostro/.rvm/scripts/rvm:启动时没有这样的文件或目录
- javascript - 在一页上运行多个水平滚动
- vb.net - 如何在 Combobox 的 Select Change 事件中使用 DataGridView 复选框?
- java - Gradle 为具有 implementation 关键字的依赖项抛出 NoClassDefFoundError