Question

我正在处理这个简单的 multiselect下拉列表，并且我想将标签设置为（空字符串）。但是，当我使用 defaultLabel 时，它似乎无法正常工作。有没有办法将标签（测试）默认设置为空字符串？

非常感谢！

这是我的代码：

<p-multiselect
    [options]="registrationStatus"
    [defaultLabel]= "someText"
    [showHeader]="false">
</p-multiSelect>

LIVE DEMO

Answer 1

您可以将空字符串设置为defaultLabel，并定义一个全局css类，该类将覆盖控件的默认样式并设置初始大小。如果要从特定宽度开始，还可以在样式中设置最小宽度。然后，您使用styleClass属性应用CSS类。官方文档here中提到了这一点。

这是要放在应用程序的全局CSS中的样式：

.multipleSelectSize {
  height: 30px;
  min-width: 100px;
}

.multipleSelectSize > .ui-multiselect-label-container > .ui-multiselect-label {
  height: 27px;
}

以及应用样式的html模板：

<p-multiSelect [styleClass]="'multipleSelectSize'" [options]="registrationStatus" [defaultLabel]= "someText" [showHeader]="false"></p-multiSelect>

这里也是StackBlitz link。

Answer 2

这是一个相对简单的解决方法：将默认标签设置为所需长度的字符串，例如“ Default”。然后，在没有选定项目的情况下，使用MultiSelectComponent上提供的[style]属性有条件地应用color: transparent。这样，您不必处理适当设置高度或宽度的问题。

<p-multiSelect [options]="registrationStatus" [defaultLabel]="someText"
    [(ngModel)]="selectedItems" [showHeader]="false"
    [style]="getDefaultLabelStyle()">
</p-multiSelect>

someText: string = 'Default';
selectedItems: Array<Object> = [ ];

getDefaultLabelStyle() {
    return (this.selectedItems.length === 0) ?
        { color: 'transparent' } : null;
}

完整StackBlitz here。

如何在下拉菜单中将标签设置为空字符串？

2 个答案: