如何预先选择 Primeng 下拉值？答案

【问题标题】：How to pre select Primeng Dropdown values?如何预先选择 Primeng 下拉值？
【发布时间】：2018-12-04 09:05:43
【问题描述】：

我的 Angular 应用中有包含一组值的primeng 下拉菜单。

在视图 Screen 中，下拉菜单不显示所选值（保存在 db 中的值），而是显示“选择”。

HTML：

<p-dropdown    [options]="reasons" [(ngModel)]="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true"> </p-dropdown>

组件.ts

this.reasons = [];
    this.reasons.push({label: 'Select', value: null});
    this.reasons.push({label: 'Reason 1', value: 'Reason 1'});
    this.reasons.push({label: 'Reason 2', value: 'Reason 2'});
    this.reasons.push({label: 'Reason 3', value: 'Reason 3'});
    this.reasons.push({label: 'Other', value: 'Other'});


this.selectedReason = 'Reason 2' (eg value stored in the db)

【问题讨论】：

看看How to set default value for PrimeNG p-dropdown。

标签： angular primeng-dropdowns

【解决方案1】：

你也可以试试这个。假设您的下拉列表如下所示：

 <p-dropdown
  class="iteration-dropdown"
  [options]="cities"
  [(ngModel)]="selectedCity"
  name="selectedCity"
  (onChange)="loadIterationFeatures()"
 ></p-dropdown>

在 ngOnInit 上，执行以下操作：

 this.selectedCity = this.select;
 this.cities = [{label: this.select, value: this.id}]

【讨论】：

【解决方案2】：

要预先选择您的primeng下拉值，您可以像这样使用patchValue()更新您的formGroup值：

public parentForm: FormGroup
this.parentForm = this.formBuilder.group({
      group: [null, [Validators.required]],
      id_module:  [null]
    })

const newObj = {group: 'Test', id_module: 32}
this.parentForm.patchValue(newObj )

【讨论】：

【解决方案3】：

在我将名称属性添加到下拉列表后它起作用了

<p-dropdown   [options]="reasons" [(ngModel)]="selectedReason"  name="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true">

【讨论】：