如何为ngx-datatable添加含编辑/删除按钮的列并传递行ID至TS函数？

1. 修改HTML模板，添加操作列 #

在现有ngx-datatable的列列表末尾新增一列，用于放置编辑和删除按钮。通过cellTemplate获取当前行的数据，点击按钮时将行ID（这里用storeId，可根据实际字段名调整）传递到TS文件的对应函数中：

修改后的完整HTML代码：

<!-- Container-fluid starts-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h5>Page Details</h5>
                </div>
                <div class="card-body">
                    <div class="custom-datatable">
                        <div class="clearfix"></div>
                        <ngx-datatable class="bootstrap" [rows]="branches" [columnMode]="'force'" [headerHeight]="50"
                            [footerHeight]="50" [rowHeight]="'auto'" [limit]="5" [selected]="selected"
                            [selectionType]="'checkbox'" [selectAllRowsOnPage]="false" (select)='onSelect($event)'>
                            <!-- 复选框列 -->
                            <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false"
                                [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
                                [checkboxable]="true">
                            </ngx-datatable-column>
                            <!-- 原有列 -->
                            <ngx-datatable-column name="name"></ngx-datatable-column>
                            <ngx-datatable-column name="location"></ngx-datatable-column>
                            <ngx-datatable-column prop="storeId"></ngx-datatable-column>
                            <!-- 新增操作列 -->
                            <ngx-datatable-column name="操作" [width]="150">
                                <ng-template let-row="row" ngx-datatable-cell-template>
                                    <button type="button" class="btn btn-primary mr-2" (click)="editBranch(row.storeId)">
                                        编辑
                                    </button>
                                    <button type="button" class="btn btn-danger" (click)="deleteBranch(row.storeId)">
                                        删除
                                    </button>
                                </ng-template>
                            </ngx-datatable-column>
                        </ngx-datatable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Container-fluid Ends-->

注：已移除原复选框列内的Delete按钮，将操作按钮统一放到新增列中，避免布局混乱。

2. 在组件TS文件中实现编辑、删除函数 #

在对应组件的.ts文件中添加两个函数，接收传递的行ID并编写业务逻辑：

export class BranchComponent {
    branches: any[] = []; // 你的数据源
    selected: any[] = [];

    // 编辑函数
    editBranch(storeId: number) {
        // 编写编辑逻辑，比如跳转编辑页、弹窗编辑表单等
        console.log('编辑门店ID:', storeId);
        // 示例：this.router.navigate(['/branch/edit', storeId]);
    }

    // 删除函数
    deleteBranch(storeId: number) {
        // 编写删除逻辑，比如调用删除接口、弹窗确认等
        if (confirm(`确定要删除ID为${storeId}的门店吗？`)) {
            console.log('删除门店ID:', storeId);
            // 示例：this.branchService.deleteBranch(storeId).subscribe(...);
        }
    }

    onSelect(event: any) {
        // 原有选择逻辑
        this.selected = event.selected;
    }
}

如果行ID字段不是storeId，只需将代码中的row.storeId替换为实际字段名（如row.id）即可。

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