使用 Angular + ngFor / ng-template 遍历数组时如何嵌套 html?
How to nest html when looping through array using Angular + ngFor / ng-template?
我正在尝试以下列格式为数组输出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 元素之间切换而不是嵌套。
在 angular 模板中嵌套 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>
我稍后会更新您已经有嵌套数组或可以组成嵌套数组的情况的答案。
你可以这样做....
<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];
从数组创建矩阵
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>
我正在尝试以下列格式为数组输出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 元素之间切换而不是嵌套。
在 angular 模板中嵌套 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>
我稍后会更新您已经有嵌套数组或可以组成嵌套数组的情况的答案。
你可以这样做....
<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];
从数组创建矩阵
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>