问题描述: 在使用Angular的FormControl下拉框时,当页面刷新时无法记住之前的选择。
解决方法: 要解决这个问题,可以通过以下步骤来实现记住选择的功能:
在组件的构造函数中,创建一个新的FormBuilder对象,并初始化下拉框的FormControl。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-component',
template: `
`
})
export class AppComponent {
formGroup: FormGroup;
selectControl: FormControl;
options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
constructor(private fb: FormBuilder) {
this.selectControl = new FormControl('');
this.formGroup = this.fb.group({
selectControl: this.selectControl
});
}
}
使用localStorage或sessionStorage来存储选择的值。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-component',
template: `
`
})
export class AppComponent implements OnInit {
formGroup: FormGroup;
selectControl: FormControl;
options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
constructor(private fb: FormBuilder) {
this.selectControl = new FormControl('');
this.formGroup = this.fb.group({
selectControl: this.selectControl
});
}
ngOnInit() {
const selectedValue = localStorage.getItem('selectedValue');
if (selectedValue) {
this.selectControl.setValue(selectedValue);
}
}
ngOnDestroy() {
localStorage.setItem('selectedValue', this.selectControl.value);
}
}
在组件的ngOnInit()生命周期钩子中,从localStorage中获取之前选择的值,并将其设置为FormControl的初始值。
在组件的ngOnDestroy()生命周期钩子中,将当前选择的值保存到localStorage中,以便在页面刷新后可以恢复之前的选择。
通过以上步骤,我们可以实现在页面刷新时记住下拉框的选择。