在Angular 2的ng2-smart-table的action列中添加自定义按钮 [英] Add custom button in actions column in ng2-smart-table in Angular 2

问题描述

在Angular 2的ng2-smart-table中，我想在操作"列中添加一个新按钮，然后单击此按钮将其路由到另一个页面. 该代码具有添加，编辑和删除按钮.我试图使新按钮像这样，但是不起作用:

In an ng2-smart-table in Angular 2 I want to add a new button in the actions column and by clicking on this button it will route to another page. This code has the add, edit, and delete buttons. I tried to make the new button like this but it's not working:

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

如何添加按钮?我搜索了文档，但找不到与此相关的任何内容.

How can I add the button? I searched the documentation and I couldn't find anything related to this.

推荐答案

在我的列表组件中

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>

此功能可帮助我确定要执行的自定义操作.

This function helped me decide on what custom action to execute.

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

这篇关于在Angular 2的ng2-smart-table的action列中添加自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！