I am struggling with binding my object to the dropdown in primeng. The dropdown is populating with empty items and I can't figure out how to specify the field name.
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>
object
{
"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;
}