在Angular 6中,可以使用[(ngModel)]指令来绑定多个文本框的值到下拉选项。
首先,在组件的HTML模板中,添加下拉选项和多个文本框:
然后,在组件的Typescript文件中,定义相关的变量和方法:
export class MyComponent {
selectedValue: string;
options: string[] = ['Option 1', 'Option 2', 'Option 3']; // 下拉选项的数组
textValue1: string;
textValue2: string;
textValue3: string;
constructor() {
this.selectedValue = this.options[0]; // 默认选择第一个选项
}
updateSelectedValue() {
// 根据需要对绑定的值进行处理
console.log('Selected value:', this.selectedValue);
console.log('Text value 1:', this.textValue1);
console.log('Text value 2:', this.textValue2);
console.log('Text value 3:', this.textValue3);
}
}
最后,在模板中添加一个按钮,以便在选择下拉选项或输入文本框的值时触发更新方法:
当选择下拉选项或输入文本框的值时,点击按钮会调用updateSelectedValue()
方法,打印所选的选项和文本框的值。
请确保在组件的模块中导入FormsModule以使用[(ngModel)]指令:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
// ...
})
export class MyModule { }