Как установить метку для пустой строки в выпадающем списке? - PullRequest
Новая
       37

Как установить метку для пустой строки в выпадающем списке?

0 голосов
/ 05 декабря 2018

Я работаю над этим простым множественным выпадающим списком , и я хочу установить метку в ничто (пустая строка) .Тем не менее, когда я использую defaultLabel , похоже, он не работает должным образомЕсть ли способ установить метку (тестирование) на пустую строку по умолчанию?.

Заранее большое спасибо!

Вот мой код: 

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

LIVE DEMO

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Вот относительно простой обходной путь: установите метку по умолчанию для строки желаемой длины, скажем «По умолчанию».Затем используйте атрибут [style], предоставленный в MultiSelectComponent, чтобы условно применить 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;
}

Full StackBlitz здесь .

0 голосов
/ 08 декабря 2018

Вы можете установить пустую строку как defaultLabel и определить глобальный класс css, который будет переопределять стили по умолчанию для элемента управления и устанавливать начальный размер.Также вы можете установить минимальную ширину в стиле, если вы хотите начать с определенной ширины.Затем вы применяете свой класс CSS, используя свойство styleClass.Это упомянуто в официальной документации здесь .

Это стили, которые нужно вставить в глобальный 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 .

...