Раскрывающийся список IGX с парой ключ-значение

Question

Я загружаю столбцы сетки динамически, что составляет около 100 столбцов, и каждый столбец имеет тип либо его текст, либо раскрывающийся список. В случае раскрывающегося списка у меня есть данные в виде пары ключ-значение, например, при реализации сетки отображение ключа связанного значения в метке раскрывающегося столбца ДАННЫЕ: {"ключ": 123, "значение": "Нью-Йоркский офис"}], скажите, пожалуйста, как отобразить значение в виде метки

<igx-grid #myGrid
  rowSelection="single" 
  [data]="gridSource.data" 
  [autoGenerate]="false" 
  displayDensity="comfortable" 
  width="100%"
  (onRowSelectionChange)="handleRowSelection($event)"
  height="730px" [paging]="true" [perPage]="20" [allowFiltering]="true">

    <ng-container *ngFor="let header of gridSource.headersMeta;">


      <div *ngIf="header.headerType==='readonly';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="false" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='textbox';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" [dataType]="'string'" [sortable]="true"
          [editable]="true" [resizable]="true">
        </igx-column>
      </div>

      <div *ngIf="header.headerType==='dropdown';">
        <igx-column [field]="header.headerKey" [header]="header.headerValue" width="12%" [editable]="true" [filterable]="true" [sortable]="true">
          <ng-template igxCell let-cell="cell">
            {{ cell.value }}
          </ng-template>
          <ng-template igxCellEditor let-cell="cell" let-value>
            <igx-select [(ngModel)]="cell.editValue" [igxFocus]="cell.focused">
              <igx-select-item *ngFor="let option of header.headerData" [value]="option.key">{{ option.value }}
              </igx-select-item>
            </igx-select>
          </ng-template>
        </igx-column>
      </div>

    </ng-container>

</igx-grid>

Answer 1

Как я вижу, вы используете igx-select. Ваше определение html выглядит хорошо, вы можете попытаться воспроизвести проблему, обновив этот образец .

<igx-select-item *ngFor="let item of items" [value]="item.key">
  {{item.value}}
</igx-select-item>

public items = [{ key: 1, value: "Orange" }, { key: 1, value: "Mango" },...];