如何在ng2-completer组件中实现部分选项禁用效果？

别再靠DOM事件加类凑活了，ng2-completer本身支持自定义模板和数据绑定，直接从数据层和模板层入手，就能同时解决鼠标和键盘操作的问题：

1. 给数据源标记禁用状态
   先在你的数据源里加一个disabled字段，明确标记哪些选项需要禁用，比如：

   // 组件.ts文件中定义数据源
   this.completeData = [
     { label: "正常选项1", disabled: false },
     { label: "禁用选项X", disabled: true },
     { label: "正常选项2", disabled: false },
     { label: "禁用选项Y", disabled: true }
   ];
   // 初始化completer的数据服务
   this.dataService = new LocalDataService(this.completeData);
   

2. 自定义选项模板
   用ng-template自定义下拉选项的渲染逻辑，直接根据disabled字段控制样式和交互，这样不管鼠标还是键盘触发渲染，样式都会生效：

   <ng2-completer 
     [(ngModel)]="searchText" 
     [dataService]="dataService"
     [minSearchLength]="0"
     (selected)="handleSelect($event)">
     <!-- 自定义选项模板 -->
     <ng-template ng2CompleterItem let-item="item">
       <div 
         [class.disabled-item]="item.disabled"
         (click)="item.disabled && $event.stopPropagation()">
         {{ item.label }}
       </div>
     </ng-template>
   </ng2-completer>
   

3. 添加禁用样式
   写CSS让禁用选项直观显示，同时阻止鼠标交互：

   .disabled-item {
     color: #999;
     cursor: not-allowed;
     pointer-events: none; /* 直接屏蔽鼠标点击 */
   }
   

4. 拦截选中事件，阻止禁用项被选中
   键盘导航时，默认还是能选中禁用选项，所以要在选中事件里判断并阻止：

   // 组件.ts中的选中事件处理
   handleSelect(selectedItem: CompleterItem) {
     if (selectedItem?.originalObject.disabled) {
       return false; // 阻止禁用项被选中
     }
     // 正常选中后的逻辑
     this.selectedValue = selectedItem.originalObject;
   }
   

之前你用keydown加类的问题在于：ng2-completer的下拉选项是动态渲染的，DOM类的修改只会作用于当前焦点的选项，鼠标操作时不会触发keydown事件，自然样式不生效。现在从数据绑定到模板渲染再到事件拦截的整套方案，能覆盖所有操作场景。

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