带有浮动标签的 Angular primeng 下拉第一次渲染得很糟糕

Question

我有一个角度应用程序，当我第一次加载组件（p-dialog）时，我使用浮动标签，浮动标签“掉落”到选择，如图所示

这是我使用的代码

<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

请像这样使用；

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

并参见https://www.primefaces.org/primeng/#/dropdown中的autoDisplayFirst（如果未定义占位符且值为空，是否将第一项显示为标签。）定义

autoDisplayFirst默认为true 。因此，如果没有定义占位符且值为 null，它将显示第一项作为标签。并且它与float-label重叠。