以下是一个使用Angular创建年份下拉列表的示例代码:
year.component.ts
的组件文件,并添加以下代码:import { Component } from '@angular/core';
@Component({
selector: 'app-year',
template: `
`,
})
export class YearComponent {
selectedYear: number;
years: number[] = [];
constructor() {
const currentYear = new Date().getFullYear();
for (let i = currentYear; i >= currentYear - 10; i--) {
this.years.push(i);
}
}
}
YearComponent
并声明:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { YearComponent } from './year.component';
@NgModule({
imports: [BrowserModule],
declarations: [YearComponent],
bootstrap: [YearComponent]
})
export class AppModule { }
标签插入年份下拉列表。
Angular Year Dropdown
这个示例通过在组件的构造函数中生成了一个包含最近十年年份的数组,然后在模板中使用*ngFor
指令遍历数组并创建下拉列表的选项。使用[(ngModel)]
指令将选定的年份与组件中的selectedYear
属性进行双向绑定,以便在选择年份时获取选定的值。