如何基于用户输入为ngx-datatable添加新行及编辑该行数据

我来帮你搞定这个问题！你当前的代码只是添加了带静态文本的行，没法让用户直接编辑。要实现可输入的新行，核心是调整数据初始化方式和表格列的模板配置，让新增行的字段能和输入框双向绑定。下面是具体的实现步骤：

1. 调整新增行的数据结构 #

首先，把你原来用<em>empty</em>的静态文本改成空字符串，这样后续可以直接绑定输入框：

addRow() {
  // 初始化空的可编辑行，而不是静态文本
  const newRow = { unique_id: '', name: '' };
  // 把新行插入到数组开头
  this.rows.unshift(newRow);
  // 重新赋值数组触发表格的变更检测（ngx-datatable需要检测数组引用变化才会更新）
  this.rows = [...this.rows];
}

这里用[...this.rows]和你原来的slice()效果一样，都是创建新数组触发更新，写法更简洁。

2. 配置可编辑的列模板 #

接下来要修改ngx-datatable的列定义，把需要编辑的列换成自定义模板，嵌入input标签并通过[(ngModel)]双向绑定行数据：

在组件HTML中定义编辑模板 #

<!-- 可编辑单元格的模板 -->
<ng-template #editCellTemplate let-row="row" let-column="column">
  <input 
    type="text" 
    [(ngModel)]="row[column.prop]" 
    placeholder="请输入内容"
    class="form-control" <!-- 可以加个样式让输入框更美观 -->
  />
</ng-template>

<!-- ngx-datatable组件 -->
<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [rowHeight]="'auto'"
>
</ngx-datatable>

在组件TS中关联列和模板 #

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  rows: any[] = [];
  // 获取模板引用
  @ViewChild('editCellTemplate') editCellTemplate!: TemplateRef<any>;

  columns = [
    { 
      prop: 'unique_id', 
      name: '唯一ID', 
      cellTemplate: this.editCellTemplate // 绑定编辑模板
    },
    { 
      prop: 'name', 
      name: '名称', 
      cellTemplate: this.editCellTemplate 
    }
  ];

  addRow() {
    const newRow = { unique_id: '', name: '' };
    this.rows.unshift(newRow);
    this.rows = [...this.rows];
  }
}

3. 可选：区分新增行（样式高亮） #

如果需要让用户一眼看出哪一行是新增的，可以给新行加个标识字段，比如isNew: true，然后在模板里根据这个字段调整样式：

修改addRow方法 #

addRow() {
  const newRow = { unique_id: '', name: '', isNew: true };
  this.rows.unshift(newRow);
  this.rows = [...this.rows];
}

调整模板样式 #

<ng-template #editCellTemplate let-row="row" let-column="column">
  <input 
    type="text" 
    [(ngModel)]="row[column.prop]" 
    placeholder="请输入内容"
    class="form-control"
    <!-- 新增行的输入框边框设为蓝色高亮 -->
    [style.border-color]="row.isNew ? '#2196F3' : 'inherit'"
  />
</ng-template>

当用户保存完新增行的数据后，记得把该行的isNew字段设为false，或者在提交时过滤掉未输入内容的行。

内容的提问来源于stack exchange，提问作者Tudor-Radu Barbu