Угловой применг выпадающий вниз с плавающей надписью плохо рендерится в первый раз

Question

У меня есть угловое приложение, в котором я использую плавающие метки, когда я впервые загружаю компонент (p-диалоговое окно), плавающие метки «падают» на выбор, как показано на рисунке

вот код, который я использую

<div class="ui-g-12">
  <span class="ui-float-label">
    <p-dropdown [options]="categories" formControlName="category" [style]="{ width: '100%' }"></p-dropdown>
    <label>{{ 'products.category-name' | translate }}</label>
  </span>
</div>

, эта форма генерируется с использованием formBuilder, и я заметил, что если я вызову form.reset (), то в следующий разМодуль визуализируется красиво.Я не уверен, что является источником проблемы какие-либо идеи?

Answer 1

Я не знаю, в чем причина, но вы можете попытаться поместить @ViewChild () в ваше раскрывающееся меню и вызвать для него метод updateFilledState ().

Answer 2

Похоже, что проблема связана с тем, что при заполнении формы с помощью patchValue или setValue свойство dropdown fill не установлено в значение true, вам необходимо установить его вручную, в то время как

вот как

<p-dropdown [options]="invoiceStatus" formControlName="status" [style]="{ width: '100%' }" #ddStatus></p-dropdown>

и в контроллере

@ViewChild('ddStatus')
  ddStatus: Dropdown;

и более поздних при установке значения для вызова формы таким образом задайте свойство заливки this.ddStatus.filled = true;я надеюсь, что они скоро это исправят

Answer 3

Ваш ярлык отображается сверху раскрывающегося списка.CSS с плавающей точкой, с которым вы работаете, не настроен для выпадающего меню (в отличие от ввода или выбора)