在Angular中,可以使用ngFor指令和ngModel指令来实现从选定的选项中显示值的功能。
下面是一个示例代码:
HTML模板:
你选择的选项是:{{ selectedOption }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
selectedOption: string;
options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
];
}
在上面的代码中,我们使用ngFor指令来循环遍历options数组,并使用ngModel指令将选中的值绑定到selectedOption变量上。在select元素中,我们使用[value]属性来设置每个选项的值,[label]属性来显示每个选项的标签。
最后,我们在p元素中使用插值表达式{{ selectedOption }}来显示选中的值。
当用户选择不同的选项时,selectedOption变量的值会自动更新,并且显示在页面上。