Angular formControlName - 反应形式 - 将值设置为 primeNg p-dropdown

Question

我有一个组件。html 具有用户 object 类型列表的下拉列表。

HTML 中的 p 下拉列表如下所示：

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

用户 model 的字段 'name' 只不过是 firstName +','+lastName。 它们在下拉列表中正确显示。 如何将下拉菜单动态设置为特定名称？

我试图将它分配给 formControlName 'assignedTo' 如下所示，但不起作用，

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

但是下拉菜单没有改变。 有人可以帮忙吗。我尝试了其他具有查找值的下拉菜单，并且效果很好。 但这有问题。

Answer 1

在您的情况下，您需要使用用户 model 设置 assignedTo FormControl 的值，因为这当前被保存为下拉值，而不仅仅是名称属性。 如果您希望下拉值只是名称属性，那么您需要将当前 usersList 集合 map 到 PrimeNG 的 SelectItem 集合，该集合具有 label 和值属性，并将其作为选项传递到模板中的 p-dropdown。