angular-ui - 带有按钮的 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，它不适用于自定义模板。批量编辑主题和事务服务主题。

无论您决定选择什么，您都必须为您的模板设置自定义样式，或者在这种情况下为 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;
    }
}

注意：如果组件使用Emulated ViewEncapsulation，则需要使用::ng-deep穿透此封装