使用 *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>

现在，我只是收到一条错误消息，说找不到 "differ supporting object '31' of type 'number'." 我很确定这是因为我没有做正确的事情让我的 ngFor 从 1 计数到31 或每个月有多少天，但我不知道该怎么做。非常感谢任何帮助，谢谢！

Answer 1

您的问题是您要迭代的内容 "Number"。在月对象中你有：

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

并且您正在尝试遍历 31。如果您将有一系列天数，例如：

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

它会起作用。

我没有做正确的事情让我的 ngFor 从 1 数到 31 或者每个月有多少天，但我不知道该怎么做。非常感谢任何帮助，谢谢！

如果你想在对象中创建一个从 1 到你的日期的数字数组，你可以在你的 class 中声明一个方法，如果你喜欢这样，它将生成：

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 在他的示例中所说»。

你可以这样做{记得在索引中添加 +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

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

Using *ngFor to display days in a month

html

angular

ngfor