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

Question

我正在将一个集合数据绑定到 prime 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 而不是整个对象？

Answer 1

我无法使用默认的 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 的疏忽，希望他们添加它。

Answer 2

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

目前没有自定义值选项。如果您的场景不打算使用迭代生成的多个下拉列表，我建议您继续将整个对象与 ngModel 一起使用。

Answer 3

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

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

现在 select { id: '1' } 而不是 { id: '1', name: 'cityName' }

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

How do I set primeNg dropdown selected value as the id of the object instead of the entire object

primeng

angular