如何在年历的模板文件中显示 angular 2+ 中二维数组的值?
How do I display the values of a 2d array in angular 2+ in the template file for a yearly calendar?
我正在尝试制作年历。现在我可以有 12 个月 parents 和所有的 children,这就可以了,但我宁愿减少 html。我有一个名为 yearlyCalendarArr 的变量,它是月份的二维数组,其中包含正确的日期和空格(它在 stackblitz 中被控制台记录)。
HTML
<div id="yearly-calendar">
<div class="month-holder" *ngFor="let days of yearlyCalendarArr; let i = index">
<div class="month">
<div class="month-header">
<h5 class="month-name">{{months[i]}}</h5>
</div>
<div class="month-body">
<div class="week-divider">
<div class="weekday" *ngFor="let w of weekdays">{{w[0]}}</div>
</div>
<div class="week-divider">
<div class="calendar-box"></div>
</div>
</div>
</div>
</div>
</div>
在 days
数组中循环一天,类似于
<div class="month-divider">
<div class="item" *ngFor="let d of days;let di=index">
<div>{{d}}</div>
</div>
</div>
css
.month-divider {
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
display: contents;
}
.item>div{
width: 1.2em;
flex:1;
background: gold;
text-align: left;
}
.item:nth-child(7n)::after {
content: '';
width: 100%;
}
您可能需要在大屏幕上进行一些 css 修复
我正在尝试制作年历。现在我可以有 12 个月 parents 和所有的 children,这就可以了,但我宁愿减少 html。我有一个名为 yearlyCalendarArr 的变量,它是月份的二维数组,其中包含正确的日期和空格(它在 stackblitz 中被控制台记录)。
HTML
<div id="yearly-calendar">
<div class="month-holder" *ngFor="let days of yearlyCalendarArr; let i = index">
<div class="month">
<div class="month-header">
<h5 class="month-name">{{months[i]}}</h5>
</div>
<div class="month-body">
<div class="week-divider">
<div class="weekday" *ngFor="let w of weekdays">{{w[0]}}</div>
</div>
<div class="week-divider">
<div class="calendar-box"></div>
</div>
</div>
</div>
</div>
</div>
在 days
数组中循环一天,类似于
<div class="month-divider">
<div class="item" *ngFor="let d of days;let di=index">
<div>{{d}}</div>
</div>
</div>
css
.month-divider {
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
display: contents;
}
.item>div{
width: 1.2em;
flex:1;
background: gold;
text-align: left;
}
.item:nth-child(7n)::after {
content: '';
width: 100%;
}
您可能需要在大屏幕上进行一些 css 修复