显示空选项的 PrimeNG 下拉列表

PrimeNG dropdown showing empty options

我的应用程序 UI 基于 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 - 卡拉奇|00001-卡拉奇|KHI-卡拉奇新|14121-BDJJSJBSJ”

请帮我想办法?

这些下拉菜单为空的原因是因为 PrimeNg 需要所有下拉菜单的模型。在您的组件中,模型如下所示,例如:

this.dropdownContent = [
  { label: 'label1', value: 'content1' },
  { label: 'label2', value: 'content2' },
  ...
];

因为是这种情况,您的 [options]="field.LookupVal.split('|')" 很可能不满足下拉组件的模型要求。

首先,我会检查您的组件内部是否可以手动使用数据并将其放入模型中,以便每个值都有标签和值。如果这不起作用,那么我会推荐其他 2 种方法来解决这个问题。

1 张地图(最简单的方法)

通过在组件内部映射模型。

当数据来自 api 时,您应该将其映射到下拉列表中。类似这样,基于您提供的下拉示例中的数据。请注意,这可能在您的订阅、可观察、ngOnInit 或其他地方。就在您获取和处理数据的任何地方...:[=​​19=]

this.options = this.apiData.LookupVal.split('|')".map((o) => ({
  label: o,
  value: o,
}));

现在,在您的 html 中,将您的选项更改为 [options]="options",或者您在组件中为其命名的任何名称。这是怎么回事,您是在映射还是更改数据以满足模型要求。因此,如果 field.LookupVal.split('|') 或您组件的任何数据的值为 foo,它现在的值为 { label: 'foo', value: 'foo' }.

2 管道(更复杂,仅在必要时或您经常这样做)

如果这不起作用,或者您无法做到,下一个选择是创建一个管道。您可能希望管道将数组中的每个项目转换为具有标签和值,就像您对地图所做的那样。像这样(可能需要根据您的具体情况进行更改):

import { Pipe, PipeTransform } from '@angular/core';
import { SelectItem } from 'primeng/api';

@Pipe({ name: 'dropdownPipe' })
export class DropdownPipe implements PipeTransform {
  @param array
  @param labelKey

transform(array: any[], labelKey: string | string[]): SelectItem[] {
  if(!labelKey || !array) {
    return undefined;
  }
  
  let pipeArray;
  
  if (labelKey instanceof Array) {
    for (let o = 2; o < labelKey.length; o++) {
      pipeArray = array.map((val, i) => ({
        label: pipeArray[i].label + val[labelKey[o]],
        value: val
     }));
  }
  return pipeArray;
}      

然后,在您的 html 中,您可以添加以下内容(确保管道在您的应用程序或组件模块中)

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

您可以像这样在构造函数中使用它,如@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);