Использование * ngFor для отображения дней в месяце - PullRequest
Новая
       15

Использование * ngFor для отображения дней в месяце

1 голос
/ 12 июня 2019

В моем проекте Angular я пытаюсь использовать * ngFor для отображения календаря.

У меня есть месяцы и количество дней в каждом, в массиве объектов: 

  public months: Array<Object> = [
    { month: "January", days: 31 },
    { month: "February", days: 28 },
    { month: "March", days: 31 },
    { month: "April", days: 30 },
    { month: "May", days: 31 },
    { month: "June", days: 30 },
    { month: "July", days: 31 },
    { month: "August", days: 31 },
    { month: "September", days: 30 },
    { month: "October", days: 31 },
    { month: "November", days: 30 },
    { month: "December", days: 31 },
  ];

и затем я пытаюсь отобразить их, используя * ngFor. Месяцы отображаются правильно, но я не могу понять, как правильно отображать каждый из дней. Вот что у меня есть для моего HTML: 

<div class="year" style="width: 100%; margin-top: 10px;">
  <h1 style="text-align: center; font-weight: 500;">2019 Vacation Calendar</h1>
  <div class="months" *ngFor="let month of months">
    <div class="month">
      <ul>
        <li>
          {{month.month}}<br>
          <span style="font-size:18px">{{currentYear}}</span>
        </li>
      </ul>
    </div>

    <ul class="weekdays">
      <li>Su</li>
      <li>Mo</li>
      <li>Tu</li>
      <li>We</li>
      <li>Th</li>
      <li>Fr</li>
      <li>Sa</li>
    </ul>

    <ul class="days">
      <li *ngFor="let day of month.days; let i=index">{{i}}</li>
    </ul>
  </div>
</div>

Прямо сейчас, я просто получаю сообщение об ошибке, в котором говорится, что он не может найти «отличающийся поддерживающий объект« 31 »типа« число ». Я почти уверен, что это потому, что я не сделал что-то правильно, чтобы позволить моему ngFor считать от 1 до 31 или сколько бы дней не было в каждом месяце, но я не знаю, как это сделать. Спасибо за любую помощь, спасибо!

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Вам нужно перебрать массив, чтобы заставить * ngFor работать, это означает, что вам нужно создать массив из числа дней «как сказал @srjkaa на своем примере».

вы можете сделатьчто-то вроде {не забудьте добавить +1 к индексу}: 

 <li *ngFor="let day of monthDays(month.days); let j=index">{{j+1}}</li>

И ваш метод будет: 

monthDays(number){
  return new Array(number);
}

Это будет лучше, чем при использовании цикла for, это не оптимально, это увеличит O (^ n).т.е. https://stackblitz.com/edit/angular-wymat2

0 голосов
/ 12 июня 2019

Ваша проблема в том, что вы пытаетесь перебрать "Число". В месяце объект у вас есть: 

{ month: "January", days: 31 },

И вы пытаетесь перебрать более 31. Если у вас будет массив дней вроде: 

{ month: "January", days: [31, ...] }

Это будет работать.

Я не сделал что-то правильно, чтобы позволить моему ngFor считать от 1 до 31 или сколько бы дней не было в каждом месяце, но я не знаю, как это сделать. Любая помощь с благодарностью, спасибо!

Если вы хотите создать массив чисел от 1 до вашего дня в объекте, вы можете объявить метод в вашем классе, который сгенерирует, если для вас вот так: 

public getMonthDays(daysCount: number): Array<number> {
  const resultArray = [];
  for (let i = 1; i <= daysCount; ++i) {
    resultArray.push(i);
  }
  return resultArray;
}

И используйте его в html следующим образом: 

<ul class="days">
  <li *ngFor="let day of getMonthDays(month.days)">{{day}}</li>
</ul>
...