Question

我的应用程序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-KARACHI | 00001-Karachi | KHI-KARACHI NEW | 14121-BDJJSJBSJ”

请帮助我找到出路吗？

Answer 1

这些下拉列表为空白的原因是，PrimeNg需要所有下拉列表的模型。在您的组件中，模型如下所示：

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

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

首先，我将检查您的组件内部是否可以手动使用数据并将其放入模型中，以便每个值都有一个标签和值。如果这不起作用，那么我建议您通过其他两种方式解决此问题。

1地图（最简单的方法）

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

当数据来自api时，您应该将其映射以进行下拉。基于您提供的下拉样本中的数据，类似这样的事情。请注意，这可以在您的订阅中，也可以在ngOnInit中观察到，也可以在其他地方。无论您在哪里获取和使用数据...：

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>

Answer 2

您可以像@JeremyLucas所说的那样在构造函数中使用它。只需使用settimeout即可，如果有条件的话

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

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

PrimeNG下拉列表显示空选项

2 个答案:

1地图（最简单的方法）

2管道（更复杂，仅在必要时或您经常执行此操作）