Добавить настраиваемую кнопку в столбец действий в ng2-smart-table в Angular 2

В моем компоненте List

actions: {
      columnTitle: 'Actions',
      add: false,
      edit: false,
      delete: true,
      custom: [
      { name: 'viewrecord', title: '<i class="fa fa-eye"></i>'},
      { name: 'editrecord', title: '&nbsp;&nbsp;<i class="fa  fa-pencil"></i>' }
    ],
      position: 'right'
    },

Тогда в шаблоне

  <ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"
   (deleteConfirm)="onDeleteConfirm($event)"  (custom)="onCustomAction($event)">
  </ng2-smart-table>

Эта функция помогла мне решить, какое настраиваемое действие выполнить.

onCustomAction(event) {
      switch ( event.action) {
        case 'viewrecord':
          this.viewRecord(event.data);
          break;
       case 'editrecord':
          this.editRecord(event.data);
      }
    }

public editRecord(formData: any) {
      this.modalRef = this.modalService.open(AddProfileComponent);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadData();
        }
      }, (reason) => {
      });
    }
    public viewRecord(formData: any) {
      this.modalRef = this.modalService.open(ViewProfileComponent);
      this.modalRef.componentInstance.formData = formData;
      this.modalRef.result.then((result) => {
        if (result === 'success') {
          this.loadData();
        }
      }, (reason) => {
      });
    }

Попробуй:

В настройках столбцов добавьте один столбец «Действия»:

  Actions: //or something
  {
    title:'Detail',
    type:'html',
    valuePrepareFunction:(cell,row)=>{
      return `<a title="See Detail Product "href="Your api key or something/${row.Id}"> <i class="ion-edit"></i></a>`
    },
    filter:false       
  },
  Id: { //this Id to use in ${row.Id}
    title: 'ID',
    type: 'number'
  },

В вашем файле настроек поместите следующее

actions: {
  edit: false, //as an example
  custom: [{ name: 'routeToAPage', title: `<img src="/icon.png">` }]
}

Теперь у вас есть настраиваемая кнопка routeToAPage с файлом img.

Затем в теге ng2-smart-table

<ng2-smart-table [settings]="settings" [source]="dataSource" (custom)="route($event)"></ng2-smart-table>

Затем вы можете создать функцию маршрута и делать то, что от нее требуется.

У меня была такая же проблема, и я нашел решение с настраиваемым действием на основе следующего примера: basic-example-custom-actions.component

настройки:

actions: {
  add: false,
  edit: false,
  delete: false,
  custom: [{ name: 'ourCustomAction', title: '<i class="nb-compose"></i>' }],
  position: 'right'
},

В шаблоне: мы определяем функцию, вызываемую нашим действием.

<ng2-smart-table #ourTable [settings]="settings" [source]="source"
    (custom)="onCustomAction($event)">

Нам нужен роутер:

import {Router} from '@angular/router';
...
constructor(private router: Router) {}

Затем мы можем перенаправить на другую страницу:

onCustomAction(event) {
  // alert(`Custom event '${event.action}' fired on row №: ${event.data.id}`);
  this.router.navigate(['pages/ourPage']);
}

То же самое можно применить, когда пользователь щелкает строку:

(userRowSelect)="onCustomAction($event)"

Изменить: если вам нужно настроить стиль, используйте следующий пример:

Добавить в component.css

По умолчанию редактирование, удаление div занимает место. Мы должны удалить это пространство, чтобы наша настраиваемая кнопка настраивалась в соответствующей строке таблицы.

:host ::ng-deep .ng2-smart-actions ng2-st-tbody-edit-delete {display: none !important;}

:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
    padding-top: 10px;
}

Если вы все еще ищете решение, я столкнулся с той же проблемой и не смог ее исправить.

Возврат к выпуску 1.1.0 (от вашего package.json ) сделал это для меня! Я также обнаружил, что тег buttonContent отлично подходит для редактирования и удаления, но не для добавления.

Надеюсь, эта ошибка скоро будет исправлена.

В шаблоне html вы можете подписаться на редактирование события удаления:

<ng2-smart-table [settings]="settings" [source]="source" (edit)="onEdit($event)" (delete)="onDelete($event)"></ng2-smart-table>

onEdit onDelete - теперь ваши пользовательские функции, чтобы что-то изменить.

надеюсь, это поможет!