如何在年度日历的模板文件中以 2+ 角度显示 2d 数组的值？答案

【问题标题】：How do I display the values of a 2d array in angular 2+ in the template file for a yearly calendar?如何在年度日历的模板文件中以 2+ 角度显示 2d 数组的值？
【发布时间】：2020-02-13 22:15:27
【问题描述】：

我正在尝试建立一个年度日历。现在我可以有 12 个月的父母和所有的孩子，这样就可以了，但我宁愿减少 html。我有一个名为 yearlyCalendarArr 的变量，它是月份的 2d 数组，其中包含正确的日期以及空格（它在 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>

【问题讨论】：

如果有人问，是的，我知道，我必须处理闰年，并且风格更好，我没有将其包含在 OP 中，以减少问题的非必要代码。

标签： angular ngfor angular8 stackblitz

【解决方案1】：

在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 修复

demo

【讨论】：

谢谢，是的，我只是为这个问题抛出了一些样式。