为什么这个 PrimeNG 下拉列表没有用相关的表单控件值初始化?
Why this PrimeNG dropdown is not initialized with the related form control value?
我正在开发一个 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 这是我想在下拉列表中设置的值。
我的代码有什么问题?我错过了什么?我该如何尝试修复它?
确保您设置为表单控件值的对象(在您的情况下: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));
我正在开发一个 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 这是我想在下拉列表中设置的值。
我的代码有什么问题?我错过了什么?我该如何尝试修复它?
确保您设置为表单控件值的对象(在您的情况下: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));