如何在ng-select中针对特定选中值阻止事件传播并冻结下拉框？

需求说明 #

在ng-select下拉框中，选中Others - please specify your reason.选项时，需保持下拉框展开状态；选中其他选项时，下拉框正常关闭并隐藏输入框。

当前实现的问题 #

1. 用(click)事件获取选中项不可靠，点击下拉框非选项区域也会触发，且无法精准获取选中的item对象
2. 全局变量inputOtherReason和openedValue无法适配*ngFor循环的多个下拉框，会导致所有下拉框状态同步错误
3. 仅靠stopImmediatePropagation()无法稳定控制下拉框展开状态，需结合ng-select内置属性实现

修改后的代码实现 #

HTML代码 #

<div *ngFor="let s of selectedSites">
  <div class="columnSite siteName">
    <span [title]="s.site_nm">{{ s.site_nm }}</span>
  </div>
  <div class="columnSite">
    <div class="custom-ng-select add-sites__ng-selectReason">
      <!-- 绑定open属性控制展开状态，使用change事件获取选中项 -->
      <ng-select #reasonSelect 
                 placeholder="Select" 
                 [items]="reasonForAddingArray" 
                 [multiple]="false"
                 [clearable]="false" 
                 [searchable]="false"
                 [open]="s.isDropdownOpen"
                 (change)="onReasonSelected(s, $event)">
        <ng-template ng-multi-label-tmp let-item="item">
          <div class="ng-placeholder custom-text">
            {{ getPlaceholderLabel('ngSelectTa') }}
          </div>
        </ng-template>
      </ng-select>
      <!-- 绑定当前site的showOtherInput属性控制输入框显示 -->
      <input *ngIf='s.showOtherInput' 
             [id]="s.site_nm" 
             type="text" 
             class="form-control inputsearch"
             placeholder="Enter Reason For Adding" 
             (keyup)="reasonForAddingOther(s,$event)"
             [ngClass]="errorCheck(s)" />
    </div>
  </div>
</div>

TypeScript代码 #

// 初始化时给每个site对象添加独立状态属性
ngOnInit() {
  this.selectedSites = this.selectedSites.map(site => ({
    ...site,
    showOtherInput: false,
    isDropdownOpen: false
  }));
}

onReasonSelected(site, selectedItem) {
  if (!selectedItem) return;

  const isOtherOption = selectedItem.label === 'Others - please specify your reason.';
  
  // 设置当前site的输入框显示状态
  site.showOtherInput = isOtherOption;
  
  if (isOtherOption) {
    // 选中Other选项时，保持下拉框展开
    site.isDropdownOpen = true;
  } else {
    // 选中其他选项时，关闭下拉框
    site.isDropdownOpen = false;
    // 保存选中的常规理由（按需调整）
    site.selectedReason = selectedItem;
  }
}

// 原有其他方法保留
reasonForAddingOther(site, $event) {
  // 处理自定义理由输入逻辑
}

关键修改点 #

• 给每个site对象添加独立的showOtherInput和isDropdownOpen属性，避免多下拉框状态冲突
• 用ng-select的(change)事件替代(click)，精准获取选中的item对象
• 通过[open]属性绑定控制下拉框展开/关闭，比单纯阻止事件更稳定可靠
• 移除冗余的事件阻止代码，改用组件内置属性实现状态控制

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