Angular中如何获取<ul><li>下拉菜单选中项并打印到控制台

• change事件仅适用于<input>、<select>、<textarea>这类原生表单控件，普通<ul>列表元素不会触发该事件，绑定在ul上的监听完全无法响应下拉项点击动作。
• 原有代码存在变量覆盖问题：selectedDay初始是存储所有下拉选项的数组，选中后直接将其赋值为单个选中值，会导致*ngFor遍历的数据源被覆盖，下拉选项会直接消失。
• <li>元素本身没有value属性，即使事件绑定正确，也无法通过event.target.value拿到选中项内容。

1. 将事件绑定从<ul>标签移除，改为给每个渲染出来的下拉项<li>绑定click事件，直接将当前遍历的选项值作为参数传入回调，不需要从事件对象中取值。
2. 拆分存储变量：单独用一个数组存所有下拉选项，另一个变量存当前选中的值，避免数据源被覆盖。

HTML部分 #

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li 
      class="dropdown-item" 
      *ngFor="let option of dropdownOptions"
      (click)="selectChangeHandler(option)"
    >
      {{option}}
    </li>
  </ul>
</div>

TS部分 #

// 下拉选项数据源、选中值分开存储
dropdownOptions = ['GCP', 'Azure', 'AWS'];
selectedOption: string = '';

selectChangeHandler(option: string) {
  this.selectedOption = option;
  console.log('选中的选项：', this.selectedOption);
}

可选适配：如果需要匹配Bootstrap下拉菜单的选中高亮样式，可以给li标签加动态类绑定：[class.active]="selectedOption === option"，点击对应选项时会自动加上高亮样式。

内容的提问来源于stack exchange，提问作者saurabh solanke