在Angular 7中,你可以通过以下步骤设置Select/dropdown框的数据源:
options
的数组:options: string[] = ['Option 1', 'Option 2', 'Option 3'];
ngFor
指令来遍历数组,并创建下拉框的选项。你可以通过使用option
标签和*ngFor
指令来实现这一点。例如:
change
事件监听器。在组件中,你可以定义一个名为selectedOption
的变量,并在下拉框的change
事件中更新它。例如:selectedOption: string;
onOptionSelected(event) {
this.selectedOption = event.target.value;
}
这样,当选择一个选项时,selectedOption
变量将被更新为所选选项的值。
这是一个完整的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-select-example',
template: `
Selected Option: {{selectedOption}}
`
})
export class SelectExampleComponent {
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
selectedOption: string;
onOptionSelected(event) {
this.selectedOption = event.target.value;
}
}
你可以将上述代码添加到你的组件中,并通过使用
标签在你的模板中引用它。这将显示一个下拉框,并在选择选项时更新所选选项的值。