Question

这是我选择的年份，我需要默认选择当前年份，然后在后面收集该数据。

这是html：

<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]="year">{{ 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);
    }    
  }

Answer 1

如果您使用响应式表单，则 mat-select 的默认选择是通过 FormControl 完成的。

const control = new FormControl('some value');

有关更多信息，请查看 FormControl API https://angular.io/api/forms/FormControl

Answer 2

这是我添加的新代码。

这是html中的表单：

<h3>Estadísticas</h3>
            <div [formGroup]="form" fxLayout="row wrap" fxLayoutGap="20px"></div>
                <mat-form-field fxFlex="20">
                    <mat-select #selectedYear placeholder="Year" formControlName="yearUser" [value]="2020">
                        <mat-option *ngFor="let year of years" [value]="year">{{ year }}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

这是新的 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);
    }    
  }

ngOnInit() {

    this.buildForm();
}

private buildForm(){
    this.formGroup = this.fb.group({
      yearUser: new Date().getFullYear(),
    });
  }

这是我一直在研究但仍然无法让它工作的东西，我一直在测试。

Angular Mat-select 默认选择

2 个答案: