时间戳

首页 > 解决方案 > 为什么这个 PrimeNG 下拉菜单没有使用相关的表单控件值初始化？

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

问题描述

我正在开发一个 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.assetDetailsS​​elected.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.assetDetailsS​​elected.employee_allocation[0]的表单控件，然后我通过以下设置指定必须从该对象使用的值是completeName字段：

 optionLabel="completeName"

问题是当表单被渲染时，值没有被设置：

在此处输入图像描述

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

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

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

标签： angularprimengangular-reactive-formsangular-forms

解决方案

确保您设置为表单控件值的对象（在您的情况下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));

推荐阅读