如何使用具有间歇性工具栏按钮的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>

但是我正在对每个按钮ex中的样式进行硬编码。 '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个按钮创建按钮工具栏的逻辑。

任何帮助将不胜感激

解决方法

您需要两个循环，可以使用slice pipe

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