在 Ignite Grid 中使用列 header 中的输入控件

Question

将 Ignite UI 用于 Angular 数据网格，我想为列名创建一个编辑器。但是，网格控件似乎禁用了我放入 header 模板中的任何输入控件。

如何在我的网格的 header 模板中启用输入控件？

下面的代码在 header 中创建了一个带有输入控件的网格。无法单击输入控件或编辑值。

<ng-template igx-header #editColumnMapping let-column>
  <input type="text" name="textInput" [value]="column.header" />
</ng-template>

<igx-grid #grid2 [data]="[[1], [2], [3], [4]]">
  <igx-column header="Values" [headerTemplate]="editColumnMapping" field="0"></igx-column>
</igx-grid>

Answer 1

您的代码看起来是正确的。我在 StackBlitz

中为您创建了 a sample

<igx-grid #grid1 [data]="data">
    <igx-column header="Rank"    field="Id"    [headerTemplate]="hTemplate"></igx-column>
    <igx-column header="Athlete" field="Name"  [headerTemplate]="hTemplate"></igx-column>

...

<ng-template #hTemplate let-column>
    <div (click)="fieldInput.focus()">
      <span >{{column.header}}</span>
      <br />
      <input #fieldInput [(ngModel)]="column.header" style="width: 100%">
    </div>
</ng-template>

该示例适用于最新的 9.0.0-beta.6 和 8.2.13

在 Ignite Grid 中使用列 header 中的输入控件

Using input controls in column header with Ignite Grid

ignite-ui

ignite-ui-angular

igx-grid