angular - 显示空选项的 PrimeNG 下拉列表

Question

我的应用程序用户界面基于 PrimeNG，我正在处理动态表单并通过 API 获取表单字段配置。我的 PrimeNG 下拉列表显示空选项。这是供引用的图像:

这是 PrimeNG 下拉列表的代码:

 <p-dropdown *ngIf="field.IsLookup == 'Y'" [options]="field.LookupVal.split('|')" 
        [id]="field?.ColumnName"
        [formControlName]="field?.ColumnName"
      [showClear]="true">
</p-dropdown>

使用 Bootstrap select 它工作正常，但我想通过 PrimeNG 实现这一点，这里是 Bootstrap select 的代码:

 <select
      *ngIf="field.IsLookup == 'Y'"
        class="form-control"
        [id]="field?.ColumnName"
        [formControlName]="field?.ColumnName"
      >
        <option *ngFor="let opt of field.LookupVal.split('|')" [value]="opt">{{
          opt
        }}</option>
 </select>

这是我从 API 获取的下拉列表数据: LookupVal:“KK-ID-IDEAS - KARACHI|00001-Karachi|KHI-KARACHI NEW |14121-BDJJSJBSJ”

请帮我想办法出去好吗？

Answer 1

正如@JeremyLucas 所述，您可以像这样在构造函数中使用它。只需使用 settimeout 和 if 条件

 setTimeout(() => {
                 if(this.field.IsLookup == 'Y'){

        this.array = this.field.LookupVal.split('|').map((o) => ({
          label: o,
          value: o,
        }))
        console.log(this.array, "array");
        
        }
      
    
    }, 1000);