Как предварительно выбрать значения Primeng Dropdown?

Question

У меня есть раскрывающийся список с набором значений в моем угловом приложении.

На экране просмотра раскрывающийся список не отображает выбранное значение (значение, сохраненное в дБ), а отображает "Выбор".

HTML:

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

Component.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)

Answer 1

Это сработало после того, как я добавил атрибут name в выпадающий список

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

Answer 2

Вы также можете попробовать это. Допустим, ваше раскрывающееся меню выглядит так:

       <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}]

Answer 3

Чтобы предварительно выбрать значения выпадающего списка, вы можете обновить значения formGroup с помощью patchValue() следующим образом:

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 )

Answer 4

HTML:

      <p-dropdown    [options]="reasons" [(ngModel)]="selectedReason"   (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true" optionValue="label"> </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' 

Либо выполните описанное выше, либо

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 = {label: 'Reason 2', value: 'Reason 2'}

Это происходит потому, что вам нужно указать весь объект, когда вы выбираете весь объект из заданных вами параметров.

Но если вы укажете optionValue как просто значение, тогда будет работать и указание только значения.