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

您需要遍历数组以使* 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

Answer 2

您的问题是您要尝试迭代“ Number”。在月份对象中，您有：

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

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

2 个答案: