点击时如何更新Angular下拉菜单？排查选中后按钮未更新问题

你的代码存在多处明显错误，导致点击下拉项后按钮文本无法更新，具体问题及修正方案如下：

1. HTML事件绑定错误 #

下拉项的按钮使用了(change)事件，但按钮点击触发的是(click)事件——change事件仅针对输入类元素（如input、select）的值变化生效，按钮点击不会触发该事件，这直接导致onItemGroupSelected方法从未被调用。

2. 属性名大小写不匹配 #

HTML中绑定的是{{ currentItemGroup.Name }}（大写N），但你的数据对象属性是name（小写n），且onItemGroupSelected赋值的是item对象，因此应改为{{ currentItemGroup.name }}，否则无法正确读取属性值。

3. TypeScript变量与类型错误 #

• currentItemGroup的类型写成了currentItemGroup（小写开头），需改为大写开头的ItemGroup（与方法参数的类型一致）。
• loadItemGroups方法里的变量名是currentitemGroup（小写i），但你定义的变量是currentItemGroup（大写I），拼写错误导致初始赋值失败。
• itemGroups被初始化为{ itemGroups: [] }的对象，但HTML里*ngFor="let item of itemGroups"是直接遍历这个对象而非内部数组，应改成*ngFor="let item of itemGroups.itemGroups"。

4. 初始赋值逻辑错误 #

loadItemGroups里取this.itemGroups[0]是错误的，因为this.itemGroups是包含itemGroups数组的对象，正确的初始赋值应为this.currentItemGroup = this.itemGroups.itemGroups[0]，同时需添加数组非空判断避免报错。

修正后的代码示例 #

HTML部分 #

<div class="btn-group dropup" ngbDropdown title="Item Group">
  <button type="button" class="btn btn-info mr-1 mb-1" ngbDropdownToggle>
    <span class="caret"> {{ currentItemGroup?.name }} </span>
  </button>
  <ul class="dropdown-menu" style="height: 300px; overflow: scroll" ngbDropdownMenu>
    <li ngbDropdownItem *ngFor="let item of itemGroups.itemGroups">
      <button type="button" (click)="onItemGroupSelected(item)" class="btn mr-1">
        <p class="small" *ngIf="item.name">{{ item.name }}</p>
      </button>
    </li>
  </ul>
</div>

TypeScript部分 #

itemGroups: ItemGroups = new BusinessRuleSets();
currentItemGroup: ItemGroup = new ItemGroup(); // 修正类型名称

onItemGroupSelected(itemGroup: ItemGroup): void {
  this.currentItemGroup = itemGroup;
}

loadItemGroups(): void {
  this.itemGroups = { itemGroups: [] };
  // 修正变量名、数组取值，添加空值判断
  if (this.itemGroups.itemGroups.length > 0) {
    this.currentItemGroup = this.itemGroups.itemGroups[0];
  }
}

说明：添加?.可选链操作符，避免currentItemGroup为空时出现报错。

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