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

【问题标题】：Why this PrimeNG dropdown is not initialized with the related form control value?为什么这个 PrimeNG 下拉菜单没有使用相关的表单控件值初始化？
【发布时间】：2021-04-12 04:39:26
【问题描述】：

我正在开发一个 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，这是我想在下拉列表中设置的值。

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

【问题讨论】：

@sloth也试过这种方式，同样的问题
this.assetDetailsSelected.employee_allocation 是否包含与employeesList$ 相同的对象？如果对象this.assetDetailsSelected.employee_allocation[0] 实际上不在employeesList$ 中，则设置控制值将不起作用。还是您使用纯字符串？那么如果employeesList$ 只是一个字符串列表，那么它可能应该是this.assetDetailsForm.setControl('employee_allocation', new FormControl(this.assetDetailsSelected.employee_allocation[0].completeName, Validators.required));。
@sloth 你上次的观察是正确的......它不是同一个对象类型。如果你把它作为答案，我很乐意接受它

标签： angular primeng angular-reactive-forms angular-forms

【解决方案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));

【讨论】：