angular - PrimeNG 下拉菜单显示空选项
问题描述
我的应用程序 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 选择它工作正常,但我想通过 PrimeNG 实现这一点,这是 Bootstrap 选择的代码:
<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"
请帮我寻找出路?
解决方案
这些下拉列表为空白的原因是 PrimeNg 需要所有下拉列表的模型。在您的组件中,模型如下所示,例如:
this.dropdownContent = [
{ label: 'label1', value: 'content1' },
{ label: 'label2', value: 'content2' },
...
];
因为是这种情况,您很可能[options]="field.LookupVal.split('|')"
不满足下拉组件的模型要求。
首先,如果您可以手动使用数据并将其放入模型中,我会检查您的组件内部,以便每个值都有一个标签和值。如果这不起作用,那么我建议使用其他 2 种方法来解决这个问题。
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>
推荐阅读
- javascript - 如何在javascript代码中动态使用表单
- xml - XML Vector - 如何创建带圆角的虚线
- mysql - MySQL 查询优化与大型数据库上的子查询和 JOIN
- facebook - 如何将 Instagram 贴纸导入 spark ar?
- javascript - 无法在 heroku 服务器上获取/注册错误
- mysql - SQL查询,根据行是否存在选择顶部结果或底部结果
- python - 无法在 Python 中使用我的类实例进行多处理
- arduino - 一个文本中有 2 个变量和 1 个字符串
- flutter - 颤振:从颤振应用程序构建apk失败
- scala - 异常在 scala shell 中被截断