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

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>

但我在每个按钮 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>

但是根据我的项目列表，我无法弄清楚一次为 3 个按钮创建按钮工具栏的逻辑 'yogaStyles'

任何帮助将不胜感激

Answer 1

需要两个循环，可以用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>

另一个选项用于数组的数组：

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

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

How to create a loop with ngfor that has intermittent toolbar buttons

html

angular

typescript

ngfor

angular-ng-if