如何在Angular中获取Bootstrap 5下拉框选中值并修改按钮文本

步骤1：修改模板代码 #

将按钮文本与组件变量绑定，同时为每个下拉选项添加点击事件处理：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    {{ selectedText }}
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#" (click)="handleDropdownSelect('Action', $event)">Action</a></li>
    <li><a class="dropdown-item" href="#" (click)="handleDropdownSelect('Another action', $event)">Another action</a></li>
    <li><a class="dropdown-item" href="#" (click)="handleDropdownSelect('Something else here', $event)">Something else here</a></li>
  </ul>
</div>

步骤2：编写组件逻辑 #

在对应的组件类中定义变量和处理方法，实现控制台打印与按钮文本更新：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  selectedText: string = 'Dropdown button';

  handleDropdownSelect(text: string, event: Event): void {
    // 阻止a标签默认的锚点跳转行为
    event.preventDefault();
    // 打印选中的选项到控制台
    console.log('选中的选项：', text);
    // 更新下拉按钮的显示文本
    this.selectedText = text;
  }
}

关键说明 #

• 通过 Angular 插值语法 {{ selectedText }} 实现按钮文本的动态绑定，选中选项后自动更新显示内容。
• handleDropdownSelect 方法接收选中的文本和事件对象，先阻止默认跳转，再完成控制台打印和文本更新两个需求。

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