تايب سكريبت - إضافة زر مخصص في عمود الإجراءات في ng2-smart-table في Angular 2

في ng2-smart-table في Angular 2 أريد إضافة زر جديد في عمود الإجراءات وعند النقر على هذا الزر سينتقل إلى صفحة أخرى. يحتوي هذا الكود على أزرار الإضافة والتعديل والحذف. حاولت إنشاء الزر الجديد بهذه الطريقة لكنه لا يعمل:

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

كيف يمكنني إضافة الزر؟ بحثت في الوثائق ولم أتمكن من العثور على أي شيء متعلق بهذا.

الإجابة رقم 1

في مكوني قائمة

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

الإجابة رقم 2

جربها:

في إعدادات الأعمدة الخاصة بك، أضف عمودًا واحدًا "الإجراءات":

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