Angular 8中ng-multiselect-dropdown无数据时始终显示搜索框的方法

针对你用Angular 8和ng-multiselect-dropdown@0.2.10遇到的「只有下拉列表有数据时才显示搜索框」的问题，我有几个实用的解决方案：

方案1：通过CSS强制显示搜索框 #

这个组件默认会在下拉列表为空时隐藏搜索框，我们可以用样式穿透强制让它始终显示。在你的组件CSS文件中添加以下代码：

::ng-deep .multiselect-dropdown .dropdown-list .search-box {
  display: block !important;
}

注意：::ng-deep在Angular中用于穿透组件封装的样式，确保这个样式能作用到第三方组件内部的元素。

方案2：初始化一个空占位项 #

给dropdownList初始化一个空的占位条目，让组件认为列表有数据，从而显示搜索框。后续动态加载数据时再替换或保留这个占位（根据需求）：

// 初始化列表
this.dropdownList = [{ item_id: '', item_text: '' }];

// 动态加载数据的示例
yourDataService.fetchItems().subscribe((data) => {
  // 如果加载到数据，替换占位项；否则保留占位
  this.dropdownList = data.length > 0 ? data : [{ item_id: '', item_text: '' }];
});

如果需要避免用户选中这个空占位项，可以在选择事件中过滤：

onItemSelect(item: any) {
  // 忽略空占位项
  if (!item.item_id) {
    this.dropdownList = this.dropdownList.filter(i => i.item_id !== '');
    return;
  }
  // 其他处理逻辑
}

方案3：修改组件源码（不推荐） #

如果前两个方案不满足需求，可以直接修改ng-multiselect-dropdown的源码：

1. 找到node_modules/ng-multiselect-dropdown/src/dropdown/dropdown.component.ts文件
2. 找到控制搜索框显示的逻辑（通常是判断dropdownList.length > 0和allowSearchFilter）
3. 去掉列表长度的判断，只要allowSearchFilter为true就显示搜索框

不过这个方法不推荐，因为升级组件时会丢失修改，而且不利于维护。

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