html - 行条纹在角度 *ngFor 中不起作用
问题描述
我正在尝试应用在具有 *nfFor 的行中剥离的效果行,但显然该类正在所有行中应用灰色背景。
我尝试类似:
HTML:
<div class="row ml-4" *ngIf="visivel">
<div class="divJanelaResultadoParcial" id="autocompletar" class="col-xl-9 divJanelaResultadoParcial">
<a class="divJanelaProduto" *ngFor="let produto of produtos" [routerLink]="['/produtos', produto.id, produto.slug]" >
<div class="row linhaProduto row-striped">
<div class="col-3">
<img class="img" src="{{ produto.foto_prin_1 }}"/>
</div>
<div class="col-6">
<span class="ml-2">{{ produto.nome }}</span>
</div>
<div class="col-3">
<span class="ml-2">{{ produto.preco | currency:'BRL' }}</span>
</div>
</div>
</a>
</div>
</div>
CSS:
.img {
width:60px;
height: 60px;
}
.divJanelaResultadoParcial{
z-index: 20;
}
.linhaProduto{
display: flex;
align-items: center;
}
.row-striped:nth-of-type(odd){
background-color: #efefef;
}
.row-striped:nth-of-type(even){
background-color: #ffffff;
}
这是结果:
解决方案
您可以使用 ngFor 的偶数和奇数功能。
*ngFor="let produto of produtos; let even = even; let odd = odd"
<div class="row ml-4" *ngIf="visivel">
<div class="divJanelaResultadoParcial" id="autocompletar" class="col-xl-9 divJanelaResultadoParcial">
<a class="divJanelaProduto" *ngFor="let produto of produtos; let even = even; let odd = odd" [routerLink]="['/produtos', produto.id, produto.slug]">
<div class="row linhaProduto row-striped" [ngClass]="{ odd: odd, even: even }">
<div class="col-3">
<img class="img" src="{{ produto.foto_prin_1 }}"/>
</div>
<div class="col-6">
<span class="ml-2">{{ produto.nome }}</span>
</div>
<div class="col-3">
<span class="ml-2">{{ produto.preco | currency:'BRL' }}</span>
</div>
</div>
</a>
</div>
</div>
.row-striped.even {
background-color: #ffffff;
}
.row-striped.odd {
background-color: #efefef;
}
推荐阅读
- ember.js - 商店已有数据后,Ember 子状态与 Ember 数据
- regex - Gitlab CI替换文件中的出现
- java - META-INF\maven\ 中的 jar 内的 pom.xml 没有受到影响
- python - 基于检查条件在 csv 输出文件的每一行末尾添加新值的 Python 脚本
- javascript - 重定向后执行一个函数 jQuery / JavaScript
- mysql - 在子查询中重用连接表
- ruby - 无法安装 ruby em-websocket:在 Ubuntu 16.04 中出现致命错误
- elasticsearch - elasticsearch 滚动 API 的 rxjs 流产生空结果集
- c# - 必须打开哪些端口才能与 Firebase 数据库通信(不是 FCM 消息传递)?
- json - 如何从 cURL 获取 JSON 作为批处理文件中的数组