如何设置igx-grid第一行不可编辑并修复最后一列删除图标不显示问题

你可以通过事件拦截或者动态绑定编辑属性两种方式实现需求：

• 方案1：编辑事件拦截（推荐，改动量最小）
  在igx-grid标签上绑定编辑进入事件：

<igx-grid 
  (cellEditEnter)="onCellEditEnter($event)"
  (rowEditEnter)="onRowEditEnter($event)"
  <!-- 其他原有属性保持不变 -->
>

在对应ts文件中添加事件处理方法：

import { IGridCellEditEventArgs, IGridRowEditEventArgs } from 'igniteui-angular';

// 拦截单元格编辑
onCellEditEnter(event: IGridCellEditEventArgs) {
  // 第一行索引为0，取消编辑操作
  if (event.rowIndex === 0) {
    event.cancel = true;
  }
}

// 若开启行编辑模式，需要额外添加该行编辑拦截
onRowEditEnter(event: IGridRowEditEventArgs) {
  if (event.rowIndex === 0) {
    event.cancel = true;
  }
}

• 方案2：动态绑定列可编辑属性
  将所有可编辑列的[editable]属性绑定为判断函数：

<igx-column [editable]="checkRowEditable" [cellEditorTemplate]="workerPickerTemplate" field="name" header="Name"></igx-column>
<!-- 其余可编辑列都做相同的[editable]绑定 -->

ts文件中添加判断方法：

checkRowEditable = (rowData: any) => {
  // 根据主键wwid匹配行索引，避免行拖拽后索引判断错误
  const rowIndex = this.data?.approvers?.findIndex(item => item.wwid === rowData.wwid) ?? -1;
  return rowIndex !== 0;
}

你的错误原因是：igx-column下直接写DOM元素不会被识别为单元格模板，必须用ng-template搭配igxCell结构指令包裹，才能将内容渲染到每一行的对应单元格中。
修正后的最后一列代码如下：

<igx-column width="100px">
  <ng-template igxCell let-rowData="rowData">
    <button class="btn btn-danger" igxButton="icon" type="button" (click)="deleteRow(rowData)">
      <igx-icon>delete</igx-icon>
    </button>
  </ng-template>
</igx-column>

如果修改模板后图标仍不显示，可检查对应模块是否已导入IgxIconModule，确保图标依赖加载正常。

内容的提问来源于stack exchange，提问作者Bozhidara Pachilova