以模型驱动形式设置primeng下拉列表的值答案

【问题标题】：Set value of primeng dropdown in model driven form以模型驱动形式设置primeng下拉列表的值
【发布时间】：2020-06-16 04:56:31
【问题描述】：

我正在尝试填充具有一些 PrimeNg 下拉菜单的表单。为简单起见，让我使用类似于他们网站上的示例。

<form [formGroup]="myFormGroup">
  <p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
</form>

this.cities = [
  {name: 'New York', code: 'NY'},
  {name: 'Rome', code: 'RM'},
  {name: 'London', code: 'LDN'},
  {name: 'Istanbul', code: 'IST'},
  {name: 'Paris', code: 'PRS'}
];

假设用户从表中选择了一行进行编辑。它对应于一些复杂的对象，其中包含一个 City 属性。我们需要在表单的下拉菜单中以编程方式选择罗马。

我尝试过：

this.myFormGroup.get("selectedCity").setValue('Rome');

试过了：

this.myFormGroup.get("selectedCity").patchValue('Rome');

尝试添加到 html：

optionLabel="name"

没有选择任何内容。

任何建议如何正确地做到这一点？

我认为我不应该添加

[(ngModel)]="selectedCity"

然后做：

this.selectedCity='Rome';

使用 Angular6 和 PrimeNG 6.1.2。

【问题讨论】：

因此该下拉列表中的任何值均未显示为选中状态。如何使所选值显示？但是 this.myFormGroup.get("selectedCity").value 显示罗马。注意：之后该下拉菜单应该是可编辑的。

标签： angular typescript primeng

【解决方案1】：

首先应该清楚的是；无论options 数组包含什么，它们都是设置为FormControl 的值。

在这种情况下，表单控件的值是城市objects，因为cities 数组包含对象。

为了以编程方式设置表单控件值，该值必须是 options 数组中的元素之一。

因此，如果要将 Istanbul 设置为选中状态，则必须从 cities 数组中设置完全相同的对象（特别是 cities[3]）

这样就可以了；

this.myFormGroup.get("selectedCity").setValue(this.cities.find(city => city.name === "Istanbul"));

作为旁注，optionLabel="name" 仅指示将城市对象中的哪个字段用作显示值，仅此而已。

这是一个演示：https://stackblitz.com/edit/angular-6-template-6yu6jz

【讨论】：

很好的答案，很有意义，对我有用。我只是希望 PrimeNG 可能有一些更直观的方法，比如函数 setSelectedValue 可以做到，但找不到它。只看到 selectedId 属性，但它并没有为我剪掉它。我还注意到在某些情况下 TS 编译器不喜欢 city.name，但可以使用 city.label（我猜是指 optionLabel）。
我很高兴听到我有帮助。我同意可以做一些更直观的事情，但目前就是这样。您也可以将答案标记为accepted 并投票吗？
正如我提到的，对于我的下拉菜单，“在某些情况下，TS 编译器不喜欢 city.name，但可以使用 city.label（我猜，指的是 optionLabel）。”。我收到 TS 错误：“SelectItem”类型上不存在属性“名称”。我确实有 { id: '123'、name: 'John Smith'} 和 optionLabel="name" 等对象的选项数组。我该如何解决？
请参阅here中的入门部分
我在“开始”中看不到答案。 const valueObj = this.cities.find(city => city.name === 'New York');不编译，给我 TS (2.9.2) 错误。有什么想法吗？