Question

我有一个component.html，其中包含Users对象类型列表的下拉列表。

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>

用户模型的字段'name'除了firstName +'，'+ lastName外什么都没有。它们在下拉列表中正确显示。如何将下拉菜单动态地设置为特定名称？

我试图将其分配给formControlName'assignedTo'，如下所示，但无法正常工作，

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

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

Answer 1

在您的情况下，您需要使用用户模型设置AssignmentTo FormControl的值，因为当前将其保留为下拉值，而不仅仅是名称属性。如果您希望下拉值仅是name属性，则需要将当前的usersList集合映射到具有标签和值属性的PrimeNG的SelectItem集合，并将其作为选项传递到模板中的p-dropdown中。

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

1 个答案: