Question

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

weekDaysHeaderArr，其长度为42 = 6 x 7。

换句话说，我想像这样将每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次，但是如何将每7个元素嵌套在<div class="row">中？

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

Answer 1

在角度模板中嵌套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 2

您可以执行以下操作。...

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

Answer 3

根据数组创建矩阵

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>

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

3 个答案: