Angular+TypeScript开发日历：如何用for循环生成div标签

问题根源 #

你编写的generateDays函数默认返回void类型（无显式返回值），但却试图将其赋值给string类型的monthDays变量，这就是类型错误的直接原因。

修复方案1：保留字符串拼接逻辑（适配原JS思路） #

修改函数，让它返回拼接完成的HTML字符串：

generateDays = (lastDay: number): string => {
  let days = '';
  for (let i = 1; i <= lastDay; i++) {
    days += `<div>${i}</div>`;
  }
  return days;
};

使用时直接接收返回值：

monthDays: string = this.generateDays(this.lastDay);

之后在组件模板中，通过[innerHTML]将字符串绑定到父元素：

<div [innerHTML]="monthDays"></div>

修复方案2：Angular规范写法（推荐） #

Angular不推荐直接拼接HTML字符串，更建议用模板语法*ngFor实现视图生成，既符合框架思想，也能避免XSS风险：

1. 组件类中生成日期数组：

daysArray: number[] = [];

generateDaysArray(lastDay: number): void {
  // 生成从1到lastDay的数组
  this.daysArray = Array.from({ length: lastDay }, (_, idx) => idx + 1);
}

2. 在生命周期钩子中初始化数组（比如ngOnInit）：

ngOnInit(): void {
  this.generateDaysArray(this.lastDay);
}

3. 模板中用*ngFor循环生成div：

<div class="month-days">
  <div *ngFor="let day of daysArray">{{ day }}</div>
</div>

内容的提问来源于stack exchange，提问作者Ashley Forrest