使用 *ngFor 显示一个月中的天数

Question

在我的 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>

现在，我收到一条错误消息，提示它找不到“'number' 类型的不同支持对象 '31'”。我很确定这是因为我没有做正确的事情来让我的 ngFor 从 1 计数到 31 或者每个月有多少天，但我不知道该怎么做。非常感谢任何帮助，谢谢！

Answer 1

您的问题是您试图迭代“数字”。在月份对象中，您有：

{ 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>

Answer 2

您需要遍历一个数组以使 *ngFor 工作，这意味着您需要根据“如@srjkaa 在他的示例中所说的那样”的天数创建一个数组。

您可以执行类似{remember to add +1 to the index}之类的操作：

 <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