使第一行 igx-grid 不可编辑

Make first row of igx-grid not editable

我有一个正常的 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>

您可以使用 IgxGridComponentrowEditEnter 事件并取消它以防止进入编辑模式,有效地使其不可编辑。

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

    <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>