ng2-smart-таблица открывает всплывающее окно при редактировании

Question

Я хотел бы открыть всплывающую страницу на ng2-smart-table компонент, когда пользователь нажимает кнопку редактирования и новую кнопку, но я не могу поймать эти события.
Например, я не могу поймать onEditRowSelect($event) функция, у вас есть идеи?
Короче говоря, я хотел бы удалить поле ввода редактирования внутри таблицы и открыть всплывающую страницу

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

Вот мой 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);             
}

Answer 1

Во-первых, вам нужно изменить опцию "mode" в настройках файла ts

settings = {mode: 'external'}

Теперь добавьте HTML в этот код

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

Теперь в ts файле создайте эту функцию onEditRowSelect(событие), вы найдете там весь контент

onEditRowSelect(event) { console.log(event); }

Если вы хотите открыть модал, то сначала создайте компонент, а затем передайте данные в этот модал. Если вы не знаете, как создать модал, перейдите по этой ссылке материал диалога

Answer 2

У меня та же проблема. И я решил добавить этот код в this.settings.

edit: {
   confirmSave : true
}

Answer 3

HTML:

<ng2-smart-table
    [settings]="settings"
    [source]="source"
    (createConfirm)="onCreateConfirm($event)"
    (deleteConfirm)="onDeleteConfirm($event)"
    (editConfirm)="onEditConfirm($event)"></ng2-smart-table>

TS:

  onCreateConfirm(event) {
    console.log('event', event);
  }
  onDeleteConfirm(event) {
    console.log('event', event);
  }
  onEditConfirm(event) {
    console.log('event', event);
 }

настройки:

export let settings = {
  columns: {
    id: {
      title: 'ID',
      filter: true
    },
    name: {
      title: 'Full Name',
      filter: true
    },
  },
  edit: {
    confirmSave: true,
    editButtonContent: '<i class="ti-pencil text-info m-r-10"></i>',
    saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
    cancelButtonContent: '<i class="ti-close text-danger"></i>'
  },
  delete: {
    confirmDelete: true,
    deleteButtonContent: '<i class="ti-trash text-danger m-r-10"></i>',
    saveButtonContent: '<i class="ti-save text-success m-r-10"></i>',
    cancelButtonContent: '<i class="ti-close text-danger"></i>'
  },
  add: {
    confirmCreate: true
  }
};

Надеюсь, поможет