Angular ng-select：如何隐藏未绑定（无标签）的选项框

方法一：提前过滤数据源，从根源避免空选项 #

直接在组件中过滤掉无标签（或标签为空）的选项，确保下拉列表里不会出现这类项：

// 假设你的数据源为options数组，label是存储标签的字段
this.options = this.options.filter(item => item.label && item.label.trim() !== '');

方法二：通过CSS隐藏已选中的空标签项 #

如果无法提前过滤数据源，可以利用CSS定位空选中项并隐藏：
ng-select的选中项会生成ng-value类的元素，空标签项内部的.ng-value-label内容为空，可使用以下样式：

/* 隐藏空标签文本 */
.ng-select .ng-value:not(.ng-value-disabled) .ng-value-label:empty {
  display: none;
}
/* 同时隐藏对应的关闭叉号，避免只剩孤立按钮 */
.ng-select .ng-value:not(.ng-value-disabled):has(.ng-value-label:empty) .ng-value-icon {
  display: none;
}

若项目不支持:has()选择器，可结合模板自定义类实现：

<ng-select [items]="options" bindLabel="label" bindValue="value" multiple>
  <ng-template ng-option-tmp let-item="item">
    {{ item.label }}
  </ng-template>
  <ng-template ng-multi-label-tmp let-item="item">
    <span [class.hidden-empty]="!item.label || item.label.trim() === ''">{{ item.label }}</span>
  </ng-template>
</ng-select>

配套CSS：

.hidden-empty {
  display: none;
}
.ng-value:has(.hidden-empty) .ng-value-icon {
  display: none;
}

方法三：在选中事件中移除空标签项 #

监听ng-select的change事件，当选中项变化时自动剔除无标签的项：

<ng-select [items]="options" bindLabel="label" bindValue="value" multiple [(ngModel)]="selectedItems" (change)="cleanEmptyItems()">
</ng-select>

组件逻辑：

cleanEmptyItems() {
  this.selectedItems = this.selectedItems.filter(item => item.label && item.label.trim() !== '');
}

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