typescript - PrimeNG Dropdown 值作为字符串而不是对象

Question

在PrimeNG 下拉列表中是否有任何解决方法来添加“optionValue”。

当前有一个optionLabel属性，但无法选择一个属性来表示值，因此您最终得到了整个对象。基本上在 PrimeNG 下拉列表中，尝试传递字符串而不是整个对象

Answer 1

我相信当前版本的 PrimeNG (11.x) 正是您正在寻找的，正如您所说的“optionValue”。一个有趣的行为是，当您使用 optionLabel 时，返回值变成了一个对象。假设我正在使用以下内容：

组件.ts

places = [
{name: "New York", label: "Work", value: 200},
{name: "Michigan", label: "Home", value: 100} 
];

selectedPlace;

HTML 场景 1：默认行为

<p-dropdown [options]="places" 
 [(ngModel)]="selectedPlace" 
 [ngModelOptions]="{standalone: true}" 
 placeholder="Select">
</p-dropdown> <!-- Shows Work or Home looking up 'label' -->
<pre>{{selectedPlace}}</pre> <!-- shows 100 or 200 depending on selection -->

HTML 场景 2：指定自定义标签

<p-dropdown [options]="places" 
[(ngModel)]="selectedPlace" 
[ngModelOptions]="{standalone: true}" 
placeholder="Select" 
optionLabel="name">
</p-dropdown> <!-- Shows New York or Michigan looking up 'name' -->
<pre>{{selectedPlace | json }}</pre> <!-- SHOWS ENTIRE SELECTED OBJECT DEPENDING ON SELECTION -->

HTML 场景 3：指定自定义值

<p-dropdown [options]="places" 
[(ngModel)]="selectedPlace" 
[ngModelOptions]="{standalone: true}" 
placeholder="Select" 
optionValue="name">
</p-dropdown> <!-- Shows Home or Work looking up 'label' -->
<pre>{{selectedPlace }}</pre> <!-- Shows New York or Michigan depending on selection -->

HTML 场景 4：指定自定义标签和自定义值

<p-dropdown [options]="places" 
[(ngModel)]="selectedPlace" 
[ngModelOptions]="{standalone: true}" 
placeholder="Select" 
optionLabel="name" 
optionValue="value">
</p-dropdown> <!-- Shows New York or Michigan looking up 'name' -->
<pre>{{selectedPlace | json }}</pre> <!-- Shows 100 or 200 depending on selection -->

如你所见，使用当前的primeNG（11.x），如果你使用optionLabel，你可以使用optionValue来只获取字符串，因为如果你不指定optionValue，你会得到一个完整的对象。

Answer 2

根据文档，该属性dataKey应该做你想做的，但我没有设法让它工作

dataKey ：用于唯一标识选项中的值的属性。