如何在使用 Angular + ngFor / ng-template 循环遍历数组时嵌套 html

Question

我正在尝试为数组输出以下格式的html

长度为 42 = 6 x 7 的weekDaysHeaderArr。

换句话说，我想像这样将每 7 列div 元素嵌套在一行div(总共 6 个(中。

<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>

我可以使用ngFor明显地生成相同的html元素(div class="col-md-auto">(42次，但是如何在<div class="row">中每7个元素嵌套一次？

我以前没有使用过ng-template和ng-container，我无法理解文档，这些可以用来做到这一点吗？据我所知，这些是为在 html 元素之间切换而不是嵌套而设计的。

Answer 1

从数组创建一个矩阵

private weekDaysHeaderArr = [ /*Your elements here*/ ]
private groupSize: number = 7;
get matrix(){ 
  return this.weekDaysHeaderArr.map((item, index, arr)=>{
    return index % this.groupSize === 0 ? arr.slice(index, index + this.groupSize) : null; 
  })
  .filter((item) => { return item; });
}

然后在模板中像这样使用它

<div class="row" *ngFor="let week of matrix">
    <div class="col-md-auto" *ngFor="let day of week">
    </div>
</div>

Answer 2

在角度模板中嵌套 for 循环非常简单。假设您有两个单独的数组，则可以执行以下操作：

const sixThings = [1, 2, 3, 4, 5, 6]
const weekdays = ['mon', 'tue', 'wed']
<div class="row" *ngFor="let thing of sixThings"> <-- **repeated 6 times**
    <div class="col-md-auto" *ngFor="let weekday of weekdays"> <-- **repeated 7 times**
    </div>
</div>

我稍后会针对您已经有一个嵌套数组或可以组成一个嵌套数组的情况更新答案。

Answer 3

你可以做这样的事情。

<div class="row" *ngFor="let week of [0,1,2,3,4,5]">
    <div class="col-md-auto" *ngFor="let day of [0,1,2,3,4,5,6]">
    </div>
</div>

然后，要从weekDaysHeaderArr获取索引，您可以这样做。

 weekDaysHeaderArr[week * 7 + day];