如何将 primeNg 下拉选择值设置为对象的 id 而不是整个对象答案

【问题标题】：How do I set primeNg dropdown selected value as the id of the object instead of the entire object如何将 primeNg 下拉选择值设置为对象的 id 而不是整个对象
【发布时间】：2020-09-06 01:58:24
【问题描述】：

我正在将一个集合数据绑定到主要的 NG 下拉列表。

<p-dropdown [options]="statusTypes" formControlName="StatusTypeCode" optionLabel="Name">
</p-dropdown>

我将 formControlName 设置为这个下拉列表，效果很好。唯一的问题是表单设置了整个对象（例如：statusTypes[2]）。我希望表单为所选值指定一个值，而不是整个对象（例如：statusTypes[2].StatusTypeCode）

我知道我可以在设置选项之前重新创建它们...

this.statusTypes= [];
for (let statusType of this.allStatusTypes) {
   this.statusTypes.push({ label: (statusType.Name), value: statusType.StatusTypeCode });
}

但是我必须在每个下拉集合上都这样做！

HTML 中是否有任何方法可以将下拉列表的值指定为等于属性（例如：optionValue="StatusTypeCode"），以便我可以使用 id 而不是整个对象填充表单？

【问题讨论】：

Primeng 本身并没有提供一种方法来完成您的要求。但是，可以通过在 p-dropdown 周围创建一个包装器来实现这种行为，该包装器具有 optionValue 通过实现 ControlValueAccessor

标签： angular primeng

【解决方案1】：

我不知道他们什么时候更新了这个，但是在 PrimeNG 文档中，Dropdown 有一个属性“optionValue”可以解决这个问题。我有一个类似的问题想从数组中选择 id 的对象，这就是我得到的

<p-dropdown id="dropdown" inputId="dropdown" optionValue="id" [autoDisplayFirst]="false" [options]="cities" formControlName="id" optionLabel="name"></p-dropdown>

现在它将选择 { id: '1' } 而不是 { id: '1', name: 'cityName' }

【讨论】：

【解决方案2】：

不幸的是，您无法更改 PrimeNG 下拉菜单使用该值的方式，默认情况下下拉菜单使用对象数组中的整个对象； PrimeNG 只允许通过 optionLabel 属性更改标签。这是因为所有 PrimeNG 组件都使用它的 api SelectItem。对于您的问题，您可以做的是从您的自定义数组创建另一个数组，就像您在描述中所做的那样。

目前没有自定义值的选项。如果您的场景不打算使用迭代产生的多个下拉菜单，我建议您继续使用整个对象和 ngModel。

【讨论】：

【解决方案3】：

我无法使用默认的 primeNG 下拉组件设置值。为了让它保持干燥，我创建了一个辅助服务，它根据集合创建数组。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HelperService {

  constructor() { }

  getDropdownValuesFromArray(collectionArray : any[]): any[] {
    let typeArray: any[] = [];
    for(let i = 0; i< collectionArray.length; i++) {
      typeArray.push({});
      typeArray[i].label = collectionArray[i].Name;
      typeArray[i].value = collectionArray[i].Code;
    }
    return typeArray;
  }
}

似乎是 primeNG 的疏忽，希望他们添加它。

【讨论】：