带有 float 标签的 Angular Primeng 下拉菜单在第一次渲染时效果不佳

Question

我有一个 Angular 应用程序，我在其中使用 float 标签当我第一次加载组件(一个 p 对话框)时， float 标签“下降”到选择，如图所示

这是我正在使用的代码

<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>

并查看autoDisplayFirst(如果没有定义占位符并且值为null，是否将第一项显示为标签。)https://www.primefaces.org/primeng/#/dropdown中的定义

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