Angular formControlName - реактивная форма - установка значений в раскрывающемся списке primeNg

Question

У меня есть компонент. html с раскрывающимся списком типов объекта Users.

Раскрывающийся список p в HTML выглядит следующим образом:

<div class="col-sm-4">
        <p-dropdown [options]="usersList" formControlName="assignedTo" optionLabel="name"  placeholder=" Select "></p-dropdown>
</div>

И элемент проверки для того же, как показано ниже:

<p-dropdown class="ng-tns-c54-11 ng-untouched ng-pristine ng-valid" ng-reflect-options="[object Object],[object Object" formControlName="assignedTo" ng-reflect-name="assignedTo" placeholder=" Select " ng-reflect-placeholder=" Select " optionLabel="name" ng-reflect-option-label="name">
<div class="ng-tns-c54-11 ui-dropdown ui-widget ui-state-default ui-corner-all" ng-reflect-ng-class="[object Object]">
<div class="ui-helper-hidden-accessible ng-tns-c54-11">
<input class="ng-tns-c54-11" role="listbox" aria-haspopup="listbox" aria-label=" " type="text" readonly=""></div>
<div class="ui-dropdown-label-container ng-tns-c54-11" ng-reflect-text="" ng-reflect-tooltip-position="right" ng-reflect-position-style="absolute"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><label class="ng-tns-c54-11 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ng-star-inserted" ng-reflect-ng-class="[object Object]"> Select </label><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={}--><!--bindings={}--></div><div class="ui-dropdown-trigger ui-state-default ui-corner-right ng-tns-c54-11" role="button" aria-haspopup="listbox"><span class="ui-dropdown-trigger-icon ui-clickable ng-tns-c54-11 pi pi-chevron-down" ng-reflect-ng-class="pi pi-chevron-down"></span></div><!--bindings={}--></div></p-dropdown>

Модель пользователей имеет поле 'name', которое представляет собой не что иное, как firstName + ',' + lastName. они правильно отображаются в раскрывающемся списке. Как динамически настроить раскрывающийся список для определенного имени?

Я пытался назначить его formControlName 'assignTo', как показано ниже, но не работал,

this.createDiscrepancyForm.setValue({
assignedTo: event.data.assignedTo.name,
})

Но раскрывающийся список не меняется. Может кто-нибудь, пожалуйста, помогите. Я пробовал другие выпадающие списки, в которых есть значения поиска, и они отлично работают. Но тут есть проблема.

Answer 1

В вашем случае вам нужно установить значение assignTo FormControl с пользовательской моделью, потому что в настоящее время оно хранится как значение раскрывающегося списка, а не только свойство имени. Если вы хотите, чтобы раскрывающееся значение было просто свойством name, вам необходимо сопоставить вашу текущую коллекцию usersList с коллекцией PrimeNG SelectItem, которая имеет свойства label и value, и передать это как параметры в раскрывающийся список p в шаблоне.