如何在ng2-smart-table新增记录时添加随机值生成函数

你可以通过两种实用方式实现这个需求，下面一步步给你说明细节：

方法一：利用addConfirm事件（推荐） #

这个方法会在用户点击「创建」按钮确认添加时，自动给新记录分配随机ID，既能避免用户手动修改，又能保证每次生成的ID都是全新的。

步骤1：修改HTML模板，绑定事件 #

在你的list-user.component.html中，给ng2-smart-table添加addConfirm事件监听：

<ng2-smart-table [settings]="settings" [source]="roles" (addConfirm)="onAddConfirm($event)"></ng2-smart-table>

步骤2：在TS文件中实现事件处理函数 #

在list-user.component.ts里，保留你已有的stringGen函数，然后新增onAddConfirm方法，用于生成随机ID并赋值给新记录：

// 保留你已有的生成随机字符串函数
stringGen(len: number): string {
  var text = "";
  var charset = "abcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < len; i++)
    text += charset.charAt(Math.floor(Math.random() * charset.length));
  return text;
}

// 新增添加确认事件处理函数
onAddConfirm(event: any) {
  // 给新记录的role_id字段生成并赋值8位随机ID
  event.newData.role_id = this.stringGen(8);
  // 确认提交修改后的新记录
  event.confirm.resolve(event.newData);
}

步骤3：更新settings配置（可选但推荐） #

为了防止用户手动修改ID，可以把role_id列设置为不可编辑：

settings = {
  add: {
    confirmCreate: true, // 确保触发addConfirm事件，默认一般为true
  },
  columns: {
    role_id : {
      title: 'Role ID',
      editable: false, // 禁止用户手动编辑ID
    },
    role_desc : {
      title: 'Role Description',
      editor: {
        type: 'textarea',
      }
    }
  }
}

方法二：设置列的默认值 #

如果你希望用户打开添加表单时就能看到随机ID，可以给role_id列配置defaultValue，每次打开表单都会生成新的ID：

settings = {
  columns: {
    role_id : {
      title: 'Role ID',
      editable: false,
      // 用函数返回随机ID，确保每次打开表单都生成全新值
      defaultValue: () => this.stringGen(8)
    },
    role_desc : {
      title: 'Role Description',
      editor: {
        type: 'textarea',
      }
    }
  }
}

⚠️ 注意：不同版本的ng2-smart-table对defaultValue支持函数的情况可能有差异，如果这个方法不生效，优先使用方法一即可。

另外要提醒你：你原来定义的randomID = this.stringGen(8)是在组件初始化时只生成一次，所有新记录都会复用同一个ID，所以不要直接使用这个变量，而是每次创建记录时调用stringGen(8)生成新的随机值~

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