angular - 带有键值对的 IGX 网格下拉菜单

Question

我正在动态加载大约 100 列的网格列，每列都有其文本或下拉列表类型，如果是下拉列表，我有一个键值对形式的数据，例如，当我实现网格时，绑定值key 显示在下拉列 label DATA : { "key": 123, "value": "New York Office"}]，请告诉我如何将值显示为标签

<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" [text]="item.value">
  {{item.value}}
</igx-select-item>

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

Answer 2

也许你现在解决了你的问题，但这对任何新手都有帮助。

<igx-column [field]="header.headerKey" -- 这里不是键，字段应该是值。所以在网格集合中，我们可能需要 id 和 value 作为下拉字段的两个属性。