Ng multiselect dropdown下拉选项显示空白的原因及解决方法

1. 字段映射配置错误：你当前使用的ng-multiselect-dropdown组件通过labelKey配置项指定数据源中作为显示文本的字段，通过primaryKey指定数据源中作为唯一标识的字段。你的配置中这两个参数都设为了status，但你的dummyList数据里没有status字段，存储显示文本的是item_text字段，唯一标识是item_id字段，字段不匹配会导致组件无法正确渲染展示文本。
2. 样式冲突：如果调整配置后仍然存在文本存在但不可见的问题，大概率是样式覆盖导致的，比如全局样式或其他组件样式把下拉选项的文字颜色设置为和背景色一致、或者文本缩进超出了可视区域。

第一步：修正配置的字段映射 #

把你的searchSettings配置调整为和数据字段匹配即可：

searchSettings: TslMultiSelectSettings = {
  enableSearchFilter: true,
  noDataLabel: 'Search For status',
  labelKey: 'item_text', // 对应数据里的显示文本字段
  primaryKey: 'item_id'  // 对应数据里的唯一标识字段
}

第二步：处理样式冲突问题 #

如果完成第一步修改后，文本仍然不可见，可添加以下样式强制覆盖下拉选项的文本样式：

/* Angular环境下需要加::ng-deep穿透组件样式封装，非Angular可去掉前缀 */
::ng-deep .multiselect-dropdown .dropdown-list .dropdown-item {
  color: #333 !important;
  text-indent: 0 !important;
  display: block !important;
}

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