Как отобразить значения двумерного массива в угловых 2+ в файле шаблона для годового календаря? - PullRequest
Новая
       40

Как отобразить значения двумерного массива в угловых 2+ в файле шаблона для годового календаря?

0 голосов
/ 17 октября 2019

Я пытаюсь построить годовой календарь. Теперь у меня могут быть 12-месячные родители и все дети, и это сделает свое дело, но я бы предпочел сократить html. У меня есть переменная с именем yearCalendarArr, которая представляет собой 2-й массив месяцев с правильными днями в них вместе с пробелами (он утешается и регистрируется в 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>

1 Ответ

1 голос
/ 17 октября 2019

Цикл дня в массиве 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 на большом экране

демо

...