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

我认为您没有绑定和保存到选定值的NgModel标记。这就是为什么您第一次选择值。由于没有变量要绑定而崩溃

Answer 2

您能否提供有关如何构建表单的更多详细信息？

我建议您确保 formControlName 是所构建表单的一部分：

let form = formBuilder.group({
    ClientIDCodeQualifier: ['']
})

一种解决方法是引入NgModel值，然后在提交表单时设置存储值：

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

ngOnSubmit() {
   this.form.controls['ClientIDCodeQualifier'].setValue(selectedValue);
}

然后验证表格是否有效。希望对您有帮助！

Answer 3

尝试

<p-dropdown [options]="cars" [(ngModel)]="selectedCar1">

导出类DropdownDemo {

cars: SelectItem[];
selectedCar1: string;   

constructor() {

    this.cars = [
        {label: 'Audi', value: 'Audi'},
        {label: 'BMW', value: 'BMW'},
        {label: 'Fiat', value: 'Fiat'},
        {label: 'Ford', value: 'Ford'},
        {label: 'Honda', value: 'Honda'},
        {label: 'Jaguar', value: 'Jaguar'},
        {label: 'Mercedes', value: 'Mercedes'},
        {label: 'Renault', value: 'Renault'},
        {label: 'VW', value: 'VW'},
        {label: 'Volvo', value: 'Volvo'}
    ];

}

}

Answer 4

同样的问题是选择后对话框中的PrimeNG下拉菜单无法再次打开。
我检查了选项是否仍然具有值，并且确实存在。
使用ngModel或为我命名没有区别。

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

下拉菜单不会再次打开

4 个答案: