带有键值对的 IGX 网格下拉菜单答案

【问题标题】：IGX grid drop-down with key value pair带有键值对的 IGX 网格下拉菜单
【发布时间】：2020-01-10 10:00:07
【问题描述】：

我正在动态加载大约 100 列的网格列，每列都有其文本或下拉列表类型，如果是下拉列表，我有一个键值对形式的数据，例如，当我实现网格时下拉列标签中显示的键值键 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>

【问题讨论】：

标签： angular datagridview infragistics igx-grid

【解决方案1】：

我看到您正在使用 igx-select。您的 html 定义看起来不错，您能否尝试通过更新 this sample 来重现该问题。

<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" },...];

【讨论】：

【解决方案2】：

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

【讨论】：