angular - 下拉菜单不会再次打开

Question

如果我打开 PrimeNG 下拉列表并选择一个选项，它将不会再次打开。我对代码没有做任何特别的事情:我动态生成一个读取 JSON 文件的表单，这是有关下拉列表的部分:

<p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values"></p-dropdown>

这是我在 JSON 文件中填充项目的方式(示例):

 {
  "controlName": "ClientIDCodeQualifier",
  "label": "create_order_panel.client_identification",
  "type": "select",
  "values": [
  {
    "label": "None",
    "value": "0"
  },
  {
    "label": "Algorithm",
    "value": "22"
  },
  {
    "label": "Firm or Legal Entity",
    "value": "23"
  },
  {
    "label": "Natural person",
    "value": "24"
  }],
}

当我第一次选择下拉列表的值后尝试再次打开下拉列表时，控制台上没有显示任何错误，但我仍然无法再次打开它。

更新

根据答案，这就是我现在正在尝试做的事情:

这是我的 HTML

<div *ngFor="let r of mainFields" class="p-grid p-col">
  <div *ngFor="let f of r" [ngClass]="getClass(f.size, f.type)">
  ....
  <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="dummyNgModel[f.controlName]"></p-dropdown>

这就是我试图在组件中执行的操作:

   ngOnInit(){
   //reading the JSON file and loading all into this.mainFields
   const formControls = {};
   this.mainFields.forEach((row) => {
            row.forEach((field) => {
                let controlOptions;
                let value = ''
                if (field.defaultValue !== undefined && field.defaultValue !== '')
                    value = field.defaultValue;
                if (field.type === 'select') {
                    this.dummyNgModel[field.controlName] = value;
                }
                controlOptions = new FormControl(value);
                formControls[field.controlName] = controlOptions;
            });
        });
        this.orderForm = this.fb.group(formControls);
        //...
      }

但是还是不行

Answer 1

遇到同样的问题，对话框中的 PrimeNG 下拉列表在选择后不会再次打开。
我检查了选项是否仍然具有值，它们确实具有值。
对我来说，使用 ngModel 或 name 没有什么区别。

将 appendTo="body" 添加到下拉列表中是我的解决方案。