Angular 2 multi select仅显示静态占位符

时间:2018-11-10 19:19:03

标签: css angular npm responsive-design

我对angular 4并不陌生,我开始研究角度多选并使用以下npm软件包

https://www.npmjs.com/package/angular2-multiselect-dropdown

我能够正确配置它,并获得选定和取消选定的项目/事件。

现在,我的问题是即使没有选择项也仅显示占位符文本。我想忽略显示在顶部的所选项目。

如果从项目中选择了任何项目,则多重选择框将如下所示转换

enter image description here

但是,无论是否有选定的项目,我都希望保持如下所示的占位符。

enter image description here

我一直试图通过响应行为来解决它。但找不到解决方案。请帮助我。

2 个答案:

答案 0 :(得分:0)

当前,该功能似乎不存在。但是,有一种解决方法。

解决方法

您可以隐藏显示的列表。在CSS中,您可以添加以下代码:

.c-list{
   display: none;
}

这不会显示回“选择国家/地区”占位符,但是会部分实现您要执行的操作。

答案 1 :(得分:0)

变通

使用CSS隐藏列表

angular2-multiselect /deep/ .c-list {
  display: none;
}

如果您不希望选择项列表增加,可以通过在下拉设置中添加badgeShowLimit来限制显示的徽章数量

enter image description here