带有浮标的Angular primeng下拉在第一次出现严重渲染

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

该问题似乎与以下事实有关：使用patchValue或setValue填充表单时，下拉填充属性未设置为true 您必须同时手动设置

这是方法

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

并在控制器中

@ViewChild('ddStatus')
  ddStatus: Dropdown;

，稍后在为表单调用设置值时，以这种方式设置fill属性 this.ddStatus.filled = true; 我希望他们会尽快解决

Answer 2

您的标签显示在下拉菜单的顶部。您要使用的浮动标签CSS均未设置为p下拉菜单（与输入或选择相反）

Answer 3

我不知道是什么原因，但是您可以尝试在下拉列表上放置@ViewChild（）并在其上调用updateFilledState（）方法。

Answer 4

请这样使用；

<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 （如果未定义占位符且值为空，是否将第一项显示为标签。）在https://www.primefaces.org/primeng/#/dropdown

中定义

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