Angular 11中ng-multiselect-dropdown搜索无结果时隐藏全选复选框

针对你在Angular 11项目中遇到的问题，有以下几种可行的解决方式：

方案1：CSS样式直接控制 #

利用CSS选择器，当下拉列表显示“无数据”提示时，自动隐藏全选复选框区域。将以下样式添加到全局样式文件（如styles.css）或组件的样式中：

/* 当全选头部后紧跟无数据提示时，隐藏全选头部 */
.multiselect-dropdown .dropdown-list .dropdown-header:has(+ .no-data) {
  display: none !important;
}

/* 调整无数据提示的上边距，避免隐藏全选后出现空白 */
.multiselect-dropdown .dropdown-list .dropdown-header + .no-data {
  margin-top: 0;
}

注：:has选择器需要现代浏览器支持，若需兼容旧版浏览器，可结合方案2使用。

方案2：通过组件事件动态控制 #

借助组件的onSearchChange事件监听搜索输入，根据过滤结果动态切换全选复选框的显示状态：

1. 模板中绑定事件与自定义类：

<ng-multiselect-dropdown
  [options]="yourDropdownOptions"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSearchChange)="handleSearchChange($event)"
  [ngClass]="{ 'hide-select-all': !hasMatchingOptions }"
></ng-multiselect-dropdown>

2. 组件类中实现逻辑：

hasMatchingOptions = true;
yourDropdownOptions = [/* 你的选项数据 */];

handleSearchChange(searchText: string): void {
  // 根据实际的选项字段调整（此处假设选项用name字段匹配）
  this.hasMatchingOptions = this.yourDropdownOptions.some(option => 
    option.name.toLowerCase().includes(searchText.trim().toLowerCase())
  );
}

3. 添加对应样式：

.hide-select-all .multiselect-dropdown .dropdown-list .dropdown-header {
  display: none !important;
}

方案3：动态修改组件配置 #

如果该版本支持showSelectAll配置的动态更新，可直接通过修改配置项控制全选复选框的显示：

dropdownSettings = {
  showSelectAll: true,
  // 其他配置项...
};

handleSearchChange(searchText: string): void {
  const hasMatch = this.yourDropdownOptions.some(option => 
    option.name.toLowerCase().includes(searchText.trim().toLowerCase())
  );
  // 重新赋值配置对象触发更新
  this.dropdownSettings = {
    ...this.dropdownSettings,
    showSelectAll: hasMatch
  };
}

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