Nebular复选框判定已勾选但未高亮显示问题求助

核心问题在于你使用了原生(click)事件并阻止了事件冒泡，干扰了Nebular nb-checkbox组件内部的状态更新逻辑——组件虽然接收到了checked绑定值的变化，但自身的UI渲染流程被中断，导致高亮状态未同步。

修复步骤： #

1. 替换事件绑定
   移除(click)事件，改用nb-checkbox原生的(checkedChange)事件，这是组件设计用来监听勾选状态变化的专属事件，不会干扰内部UI更新：

   <nb-checkbox *ngIf="globalSettings.showMultipleSelection" 
                class="list-checkbox clickable" 
                (checkedChange)="toggleSelectedItem(item, $event)"
                [checked]="itemSelected(item)" >
     {{itemSelected(item)}}
   </nb-checkbox>
   

2. 调整事件处理函数
   修改toggleSelectedItem函数，直接利用checkedChange传递的布尔值来处理选中/取消逻辑，无需手动判断索引：

   toggleSelectedItem(item, isChecked: boolean) {
     const key = this.utilsService.getObjectValue(item, this.globalSettings.multipleSelectionKey);
     
     if (isChecked) {
       this.selectedItems.push(key);
       this.emitSelectedItems('add', [key]);
     } else {
       const tmpIndex = this.selectedItems.findIndex(elem => elem === key);
       if (tmpIndex >= 0) {
         this.selectedItems.splice(tmpIndex, 1);
         this.emitSelectedItems('remove', [key]);
       }
     }
     
     this.selectedItems = JSON.parse(JSON.stringify(this.selectedItems));
     this.onSelectedItemChange();
   }
   

额外说明： #

• 你之前通过JSON.parse(JSON.stringify(...))更新数组引用的方式是有效的，能触发Angular变更检测；
• itemSelected函数的逻辑无需修改，它能正确返回基于selectedItems数组的勾选状态；
• 移除$event.stopPropagation()后，组件内部的UI更新流程会正常执行，勾选高亮状态会和[checked]绑定值同步。

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