为什么这个 PrimeNG 下拉列表没有用相关的表单控件值初始化？

Question

我正在开发一个 Angular 应用程序，我对以下与在这种特定情况下如何确定 PrimeNG dropdwon 相关的问题感到抓狂。

这是我组件的 ngOnInit() 方法。

ngOnInit(): void {
      
    this.loadEmployeesList().then(() => {this.loading = false;})

    this.assetService.currentAssetInfoMessage.subscribe(asset => {
      console.log("ASSET: ", asset);

      this.assetDetailsSelected = asset;

      this.assetDetailsForm = this.fb.group({
        asset_type: [this.assetDetailsSelected.asset_type, [Validators.required]],
        asset_model: [this.assetDetailsSelected.asset_model, [Validators.required]],
        employee_allocation: [null, [Validators.required]],
        asset_features: [this.assetDetailsSelected.asset_features, [Validators.required]],
        serial_number: [null, [Validators.required]],
        accessories: [null, [Validators.required]],
        allocation_date: [null, [Validators.required]],
        company: [null, [Validators.required]],
        notes: [null, [Validators.required]],
        invoice: [null, [Validators.required]]
      });

     if(this.assetDetailsSelected.employee_allocation) {
       console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

       this.assetDetailsForm.setControl('employee_allocation',
                                         new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));

       
     }
      
    });

    
  }

如您所见，我首先检索了用于填充我的 dropwown 选项的员工列表（它工作正常）。然后我定义了一个包含一些字段的表单。注意：对于感兴趣的字段，我必须检查该字段是否不为空，因为由于异步行为，它不会立即到达，所以为了不破坏我的应用程序，我已经完成了：

 if(this.assetDetailsSelected.employee_allocation) {
   console.log("BLA");
   console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

   this.assetDetailsForm.setControl('employee_allocation',
                                     new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));      
 }

当 this.assetDetailsSelected.employee_allocation 不是未定义时它被正确打印并且我在我的表单中添加了一个 nre 控件。

然后进入这个组件的 HTML 代码我有一个包含这个的表单：

<div class="row">
    <div class="col-2">
      <p>Assegnato a</p>
    </div>
    <div class="col-10">
      <p-dropdown id="employee_allocation"
                  [options]="employeesList$ | async" 
                  formControlName="employee_allocation"
                  placeholder="Impiegato" 
                  optionLabel="completeName" 
                  [showClear]="true">
      </p-dropdown>
    </div>
</div>

如您所见，我正在使用检索到的 employeesList$ 来填充选项。然后我想要显示表单中设置的值，这个：

this.assetDetailsForm.setControl('employee_allocation',
                                     new FormControl(this.assetDetailsSelected.employee_allocation[0], Validators.required));

如你所见，我设置了：

 formControlName="employee_allocation"

指向包含对象 this.assetDetailsSelected.employee_allocation[0] 的表单控件，然后我指定必须从该对象使用的值是completeName字段，通过这样设置：

 optionLabel="completeName"

问题是在呈现表单时未设置值：

如您所见，它没有显示带有员工姓名的选定值。在 Chrome 控制台中，我获得了这一行的输出： console.log(this.assetDetailsSelected.employee_allocation[0].completeName);

是：Mario Rossi 这是我想在下拉列表中设置的值。

我的代码有什么问题？我错过了什么？我该如何尝试修复它？

Answer 1

确保您设置为表单控件值的对象（在您的情况下：this.assetDetailsSelected.employee_allocation[0]）实际上在可能的选项列表中（在您的情况下：employeesList$ | async）。

看起来 employeesList$ | async 是一个字符串列表，但是 this.assetDetailsSelected.employee_allocation[0] 看起来像一个 JSON 对象。

也许你想做

this.assetDetailsForm.setControl('employee_allocation', new FormControl(this.assetDetailsSelected.employee_allocation[0].completeName, Validators.required));

为什么这个 PrimeNG 下拉列表没有用相关的表单控件值初始化？

Why this PrimeNG dropdown is not initialized with the related form control value?

angular

primeng

angular-reactive-forms

angular-forms