Angular 年份下拉列表

Question

我从 Angular 开始，需要创建一个下拉列表来选择年份。从 2020 年到当前年份，将当前年份保留为默认年份。后面会采集当年的数据，查询得到所选年份的数据，更改年份时会自动显示在前面。我不知道如何开始或是否需要安装任何 Angular 包。

<select id="year" name="year" class="select_year cart_select italic light" />
 <option selected hidden>Año</option> 
 <option value="2021">2021</option> 
 <option value="2020">2020</option>
</select>

这就是我现在的方式，但我需要它是动态的并且每年更新默认选择的年份。

Answer 1

您可以在您的组件中定义一组可选择的年份，如下所示:

selectedYear: number;
years: number[] = [];

constructor() {
  this.selectedYear = new Date().getFullYear();
  for (let year = this.selectedYear; year >= 2020; year--) {
    this.years.push(year);
  }
}

您的模板必须如下所示:

<select ([ngModel])="selectedYear">
  <option *ngFor="let year of years" [value]="year">{{ year }}</option> 
</select>

请看这个StackBlitz看看它是如何工作的。