内部带有按钮的 Igx 网格单元

Question

我正在使用 Ignite UI 进行一个 Angular 项目。我在 igx 网格的每个单元格中都有一个 igx 网格和“编辑”按钮。

当我编辑其中一个单元格并按 Enter 键时，更改后的单元格值显示如下：

而且不像这个斜体：

这是我的 igx 网格。

    <igx-grid igxPreventDocumentScroll
              #grid1
              [batchEditing]="true"
              [data]="posts"
              [primaryKey]="'myId'"
              [rowHeight]="40">
    
      <igx-column field="monat" dataType="string" header="Monat" [editable]="true" [movable]="true">
    
         <ng-template igxCell let-cell="cell">

           <span>{{ cell.value }}</span>

              <button igxButton="icon 
              (click)="editSelectedData(cell.id.rowID,cell.column.field, 
              cell.value)" >
                   <igx-icon>edit</igx-icon>
              </button>

        </ng-template>
      </igx-column>
    </igx-grid>

如何在 igx 网格的单元格中添加一个按钮，以便更改的数据将像第三个屏幕截图中那样以斜体标记？

我认为 <span> 元素不正确，如果是，我应该使用哪个 HTML 元素？谢谢。

Answer 1

之所以看到不同的字体样式，是因为您使用的是自定义模板。已编辑值的默认样式（尚未提交到数据库的更改）是 font-style:italic，不适用于自定义模板。 Batch editing topic and Transaction service topic.

您必须为模板设置自定义样式，在这种情况下，span 或 div 元素，无论您决定选择什么：

<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" [rowEditable]="true">
...
  <igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'"></igx-column>
  <igx-column field="UnitsOnOrder" header="Units On Order" dataType="number">
            <ng-template igxCell let-cell="cell">
                <div class="test">{{ cell.value }}</div>
                   <button igxButton="icon">
                        <igx-icon>edit</igx-icon>
                   </button>
             </ng-template>
        </igx-column>

:host ::ng-deep {
    .igx-grid__td--edited > div {
        font-style: italic;
    }
}

注意：如果组件使用EmulatedViewEncapsulation，则需要使用 ::ng-deep

穿透此封装

内部带有按钮的 Igx 网格单元

Igx grid cell with button inside

infragistics

angular-ui

igx-grid