具有反应形式的 p-dropdown 未正确绑定
p-dropdown with reactive forms not binding correctly
我正在使用 primeng 下拉菜单,但很难将我的对象竞标到下拉菜单中。它确实用空项目填充了下拉列表。不确定如何指定字段名称。
HTML
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':((ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) &&
!ersaForm.get('costCenter').valid) || (ersaForm.get('costCenter').value.cost_center_name == '')
}">
<label for="costCenterId" class="control-label">Cost Center</label>
<p-dropdown [options]="iCostCenter" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter" dataKey="cost_center_id">
</p-dropdown>
对象
{
"result": [
{
"cost_center_id": 0,
"cost_center_name": "0"
},
{
"cost_center_id": 1,
"cost_center_name": "1"
},
{
"cost_center_id": 2,
"cost_center_name": "2"
},
}
TS
export interface ICostCenter{
cost_center_id: string,
cost_center_name: string
}
iCostCenter: ICostCenter[];
this._appParams.getAllCostCenters()
.subscribe(
data => {
this.iCostCenter = data.result;
}
如果您查看 official documentation,它表示如果您要绑定到任意对象的集合,则需要使用 optionLabel
属性。
<p-dropdown [options]="iCostCenter" optionLabel="cost_center_name" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter" dataKey="cost_center_id">
</p-dropdown>
<p-dropdown [options]="iCostCenter"
optionLabel="cost_center_name"
styleClass="form-control"
formControlName="costCenter"
placeholder="Cost Center (required)"
id="costCenterId"
name="costCenter"
dataKey="cost_center_id"
optionValue="costCenter">
</p-dropdown>
您可以使用 optionValue
将特定值设置为 formControl
而不是 Object.dataKey
属性 用于唯一标识选项中的值。
我正在使用 primeng 下拉菜单,但很难将我的对象竞标到下拉菜单中。它确实用空项目填充了下拉列表。不确定如何指定字段名称。
HTML
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':((ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) &&
!ersaForm.get('costCenter').valid) || (ersaForm.get('costCenter').value.cost_center_name == '')
}">
<label for="costCenterId" class="control-label">Cost Center</label>
<p-dropdown [options]="iCostCenter" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter" dataKey="cost_center_id">
</p-dropdown>
对象
{
"result": [
{
"cost_center_id": 0,
"cost_center_name": "0"
},
{
"cost_center_id": 1,
"cost_center_name": "1"
},
{
"cost_center_id": 2,
"cost_center_name": "2"
},
}
TS
export interface ICostCenter{
cost_center_id: string,
cost_center_name: string
}
iCostCenter: ICostCenter[];
this._appParams.getAllCostCenters()
.subscribe(
data => {
this.iCostCenter = data.result;
}
如果您查看 official documentation,它表示如果您要绑定到任意对象的集合,则需要使用 optionLabel
属性。
<p-dropdown [options]="iCostCenter" optionLabel="cost_center_name" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter" dataKey="cost_center_id">
</p-dropdown>
<p-dropdown [options]="iCostCenter"
optionLabel="cost_center_name"
styleClass="form-control"
formControlName="costCenter"
placeholder="Cost Center (required)"
id="costCenterId"
name="costCenter"
dataKey="cost_center_id"
optionValue="costCenter">
</p-dropdown>
您可以使用 optionValue
将特定值设置为 formControl
而不是 Object.dataKey
属性 用于唯一标识选项中的值。