typescript - Adăugați un buton personalizat în coloana de acțiuni în ng2-smart-table în Angular 2

Într-un ng2-smart-table în Angular 2 vreau să adaug un buton nou în coloana de acțiuni și, făcând clic pe acest buton, să se navigheze către o altă pagină. Acest cod are butoanele de adăugare, editare și ștergere. Am încercat să fac butonul nou astfel, dar nu funcționează:

settings = {

    add: {
      addButtonContent: '<i  class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark" ></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
      confirmCreate: true
    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',
      confirmSave: true
    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    }, 

Cum pot adăuga butonul? Am căutat în documentație și nu am găsit nimic legat de acest lucru.

Răspuns #1

În componenta mea 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'
    },

Apoi în șablon

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

Această funcție m-a ajutat să decid ce acțiune personalizată să execut.

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) => {
      });
    }

Răspunsul #2

Încearcă-l:

În setarea coloanelor tale, adaugă o coloană „Acțiuni”:

  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'
  },