ng2-smart-table在编辑单击时打开弹出窗口

Gel*_*o77 1 ng2-smart-table angular

ng2-smart-table当用户单击“编辑”和“新建”按钮时,我想在组件上打开一个弹出页面,但是我无法捕获这些事件。
例如我找不到onEditRowSelect($event)函数,你有什么主意吗?
为了简短起见,我想删除表格内的编辑输入字段并打开一个弹出页面

<ng2-smart-table 
  [settings]="settings" 
  [source]="data"                
  (editConfirm)="onEditRowSelect($event)">
</ng2-smart-table>
Run Code Online (Sandbox Code Playgroud)

这是我的ng2-smart-table设定

this.settings = {

  columns: {
  },
  actions: {
    position: 'right',
    add: true,
    edit:true,
    editable:false,
    columnTitle: '',
  },
  add: {
    addButtonContent: 'NEW',                        
  },
  edit: {
    editButtonContent: 'EDIT',                        
    position: 'right',
  }      
}    

onEditRowSelect(event) {
  console.log(event.data.nombre);             
}
Run Code Online (Sandbox Code Playgroud)

小智 5

首先,您需要更改ts文件中设置中的“模式”选项

settings = {mode: 'external'}
Run Code Online (Sandbox Code Playgroud)

现在将html添加到此代码中

<ng2-smart-table [settings]="settings" [source]="data" (edit)="onEditRowSelect($event)"></ng2-smart-table>
Run Code Online (Sandbox Code Playgroud)

现在在ts文件中创建onEditRowSelect(event)函数,您将在其中找到所有内容

onEditRowSelect(event) { console.log(event); }
Run Code Online (Sandbox Code Playgroud)

如果要打开模式,请先创建一个组件,然后将数据传递到该模式。如果您不知道如何创建模态,请遵循此链接材料对话框