html - 如何使用具有间歇性工具栏按钮的 ngfor 创建循环
问题描述
我下面有这个。
<div class="btn-toolbar special">
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('bikram') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('bikram')">Bikram</button>
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('iyengar') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('iyengar')">Iyengar</button>
<button type="button" class="btn mb-2" [ngClass]="selectedStyles.includes('yin') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('yin')">Yin</button>
</div>
<div class="btn-toolbar special">
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('hatha') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('hatha')">Hatha</button>
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('kundalini') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('kundalini')">Kundalini</button>
<button type="button" class="btn mb-2" [ngClass]="selectedStyles.includes('vinyasa') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('vinyasa')">Vinyasa</button>
</div>
<div class="btn-toolbar special">
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('power') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('power')">Power</button>
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('sivananda') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('sivananda')">Sivananda</button>
<button type="button" class="btn mb-2" [ngClass]="selectedStyles.includes('restorative') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('restorative')">Restorative</button>
</div>
<div class="btn-toolbar special">
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('prenatal') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('prenatal')">Prenatal</button>
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes('aerial') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('aerial')">Aerial</button>
<button type="button" class="btn mb-2" [ngClass]="selectedStyles.includes('acro') ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass('acro')">Acro</button>
</div>
但我在每个按钮前的样式中都进行了硬编码。'vinyasa'
现在我有一个项目列表,我想遍历它们并构造相同的东西(每个 btn 工具栏中的 3 个按钮),就像这样。
<div *ngFor="let style of yogaStyles; let i = index">
<div *ngFor="let number of [0,1,2,3]" class="btn-toolbar special">
<button type="button" class="btn mr-2 mb-2" [ngClass]="selectedStyles.includes(style.id) ? 'btn-yb' : 'btn-outline-secondary'" (click)="toggleClass(style.id)">{{style.name}}</button>
</div>
</div>
但鉴于我的项目列表“yogaStyles”,我无法弄清楚一次为 3 个按钮创建按钮工具栏的逻辑
任何帮助,将不胜感激
解决方案
你需要两个循环,你可以使用切片管
<div class="btn-toolbar special" *ngFor="let row of [0,1,2]">
<ng-container *ngFor="let style of yogaStyles
|slice:(row*3):(row+1)*3; let i = index">
<button type="button" class="btn mr-2 mb-2"
[ngClass]="selectedStyles.includes(style.id) ? 'btn-yb' : 'btn-outline-secondary'">
{{style.name}}
</button>
</ng-container>
</div>
Anohter 选项用于数组数组:
toolsBars=[
[
{"id": "bikram","name": "bikram"},
{"id": "iyengar","name": "iyengar"},
{"id": "yin","name": "yin"}
],
[
{"id": "hatha","name": "hatha"},
{"id": "kundalini","name": "kundalini"},
{"id": "vinyasa","name": "vinyasa"}
],
...
]
您可以创建数组“硬编码”或在数组上使用 forEach
yogaStyles = [
{ id: "bikram", name: "bikram" },
{ id: "iyengar", name: "iyengar" },
{ id: "yin", name: "yin" },
{ id: "hatha", name: "hatha" },
{ id: "kundalini", name: "kundalini" },
{ id: "vinyasa", name: "vinyasa" }
];
toolsBar = []; //<--a new variable
ngOnInit() {
this.yogaStyles.forEach((x, index) => {
if (index % 3 == 0) this.toolsBar.push([]);
const items = this.toolsBar[this.toolsBar.length - 1];
items.push({ id: x.id, name: x.name });
});
}
推荐阅读
- c++ - Qt5 QListView 在水平行而不是垂直列表中设置项目
- html - 我可以改变 Flexbox 的收缩方式吗?
- php - 类表单控件不允许隐藏文本框隐藏在 html 中
- sapui5 - 根据条件操作表格行中的图标
- c++ - c++ 上的向量作为类的成员
- macos - 将数据从一个单元格中分离出来,没有分隔符到列
- flutter - TextFormField 在选择图像后忽略任何文本更改
- node.js - 环回nodejs服务器未启动
- javascript - React,gatsbyjs:循环对象 - 组件不会被渲染
- .htaccess - mod_rewrite 错误 500 对于某些没有重写的文件不会给出错误