使 igx-grid 的第一行不可编辑

如何解决使 igx-grid 的第一行不可编辑

我有一个普通的 igx-grid，其中的行都是可编辑的。但是，第一行不应该是可编辑的。我该如何处理？另外，在下面的代码片段中，你能告诉我我在最后一栏中做错了什么吗？我只想在那里显示一个垃圾桶图标，但该单元格是空白的。

<igx-grid (dropped)="onDropAllowed($event)" (onRowDragStart)="onDragallowed($event)"
          [data]="data?.approvers"
          [height]="null" [rowDraggable]="true" igxDrop primaryKey="wwid">
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="name" header="Name">
    </igx-column>
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="email"
                header="Email"></igx-column>
    <igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="wwid" header="WWID">
    </igx-column>
    <igx-column [editable]="true" field="role" header="Role"></igx-column>
    <igx-column>
        <button class="btn btn-danger" igxButton="icon" type="button">
            <igx-icon>delete</igx-icon>
        </button>
    </igx-column>
</igx-grid>

解决方法

您可以使用 IgxGridComponent 的 rowEditEnter 事件并取消它以防止进入编辑模式，从而有效地使其不可编辑。

关于在列中设置图标的问题，您应该将内容包装在这样的模板中：

    <igx-column width="100px" [filterable]="false">
       <ng-template igxCell let-cell="cell">
          <button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex)">
              <igx-icon>delete</igx-icon>
          </button>
        </ng-template>
    </igx-column>