时间戳

首页 > 解决方案 > 如何将 primeNg 下拉选择值设置为对象的 id 而不是整个对象

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

问题描述

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

标签： angularprimeng

解决方案

我不知道他们什么时候更新了这个，但是在 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' }

推荐阅读