这是一个使用Angular 7的示例代码,用于实现多个下拉列表的功能。下面是一个基本的组件示例,其中包含一个函数来处理多个下拉列表的选择。
首先,在你的组件类中,你需要定义一个数组来存储下拉列表的选项。然后,你可以使用ngFor指令来循环遍历数组,并为每个下拉列表绑定一个选择的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
template: `
Selected Option: {{ dropdown.selectedOption }}
`
})
export class DropdownComponent {
dropdowns = [
{
options: ['Option 1', 'Option 2', 'Option 3'],
selectedOption: ''
},
{
options: ['Option A', 'Option B', 'Option C'],
selectedOption: ''
}
];
// 处理下拉列表选择的函数
handleDropdownChange() {
console.log(this.dropdowns);
}
}
在上面的示例中,我们定义了一个包含两个下拉列表的数组dropdowns
。每个下拉列表都有一个选项数组和一个选择的值属性selectedOption
。
在模板中,我们使用ngFor
指令来循环遍历dropdowns
数组,并为每个下拉列表绑定选项和选择的值。我们还在每个下拉列表下面显示了当前选择的值。
你可以根据需要修改下拉列表的选项和初始选中的值。在handleDropdownChange
函数中,你可以根据需要处理下拉列表的选择。
希望这个示例能够帮助到你。