如何使用ngfo创建一个具有间歇性工具栏按钮的循环

Question

我下面有这个。

<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个按钮的按钮工具栏的逻辑

如有任何帮助，将不胜感激

Answer 1

您需要两个循环，可以使用切片管

<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>

另一个选项是使用数组：

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 over the array

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 });
});
}