角度年份下拉列表
角度年份下拉列表
提问于 2021-01-23 18:06:11
我从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>这就是我现在的方式，但我需要它是动态的，并每年更新默认选择的年份。
回答 3
Stack Overflow用户
发布于 2021-01-23 19:48:39
您可以在组件中定义一个可选年份数组，如下所示：
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>请看一下这个，看看它是如何工作的。
Stack Overflow用户
发布于 2021-01-25 17:03:20
下面是一个函数，它返回指定年份之后的所有年份
getCurrentYear() {
const date = new Date();
return date.getFullYear();
}
getYears(from) {
const years = [];
const currentYear = getCurrentYear();
for (let index = 0; index <= currentYear - from; index++) {
years.push(from + index);
}
return {years, currentYear};
}<select id="year" name="year" [(ngModel)]="getCurrentYear()" class="select_year cart_select italic light" />
<option *ngFor="let year of getYears(2020).years" [ngValue]="year">{{ year }}</option>
</select>将上述两个方法放在component.ts文件中，并调用component.ts文件中的getYears函数，而不是HTML，并将其赋值给变量
Stack Overflow用户
发布于 2021-01-25 16:36:20
好的，酷对我来说效果很好。现在我正试着让它适应角度材料，但它不让我选择年份。这就是我所拥有的：
<mat-form-field fxFlex="25">
<mat-select #selectedYear placeholder="Year" formControlName="yearUser">
<mat-select-search [matSelect]="selectedYear"></mat-select-search>
<mat-option *ngFor="let year of years" [value]="yearUser">{{ year }}</mat-option>
</mat-select>
</mat-form-field>我在ts中的代码如下：
selectedYear: number;
years: number[] = [];
constructor(
private fb: FormBuilder,
private msgs: MessageService,
private sessionService: SessionService,
private dashboardService: DashboardService,
private router: Router,
private uiUtils: UIUtilsService,
private employeeService: EmployeeService,
) {
this.selectedYear = new Date().getFullYear();
for (let year = this.selectedYear; year >= 2020; year--) {
this.years.push(year);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65857900
复制相关文章
相似问题
腾讯云开发者
