您可以使用Angular的模板语法和事件绑定来实现只显示所选值的自定义下拉菜单。下面是一个基本的示例代码:
HTML模板:
- {{ option }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.css']
})
export class CustomDropdownComponent {
options = ['Option 1', 'Option 2', 'Option 3'];
selectedValue = '';
isDropdownOpen = false;
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
}
selectOption(option: string) {
this.selectedValue = option;
this.isDropdownOpen = false;
}
}
在上面的示例中,我们使用了一个按钮来控制下拉菜单的显示和隐藏。当点击按钮时,toggleDropdown()
方法会被调用,将isDropdownOpen
变量的值取反,从而实现下拉菜单的显示和隐藏。
在下拉菜单的ul
元素上,我们使用*ngIf
指令来根据isDropdownOpen
的值来决定是否显示下拉菜单。
在下拉菜单中的每个选项li
上,我们使用*ngFor
指令来遍历options
数组,并使用(click)
事件绑定来调用selectOption()
方法,该方法会将所选选项的值赋给selectedValue
变量,并将isDropdownOpen
设置为false
来隐藏下拉菜单。
这样,只有所选值会显示在按钮上,而不是显示所有的选项。