p-выпадающий с реактивными формами, не связывающими правильно

Question

Я использую раскрывающийся список 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;

            }

Answer 1

Если вы посмотрите на официальную документацию, там написано, что вам нужно использовать 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>

Answer 2

<p-dropdown [options] = "iCostCenter" optionLabel = "cost_center_name" styleClass = "form-control" formControlName = "costCenter" placeholder = "Центр затрат (обязательно)" id = "costCenterId" name = "costCenter" dataKey = " cost_center_id "optionValue =" costCenter>

Вы можете использовать optionValue, чтобы установить конкретное значение для formControl вместо свойства Object.dataKey, используемого для уникальной идентификации значения в параметрах.