0

我能够向表格添加自定义操作，但我仍然不知道如何使用该自定义操作在单击时在不同的页面/模式中打开记录。如何将 ID 分配给该记录行？如何将其传递给不同的视图？

在component.html中

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

在 component.ts

settings = {
mode: 'external',
hideSubHeader: true,    
actions: {
  position: 'right',
  add: false,
  edit:false,
  delete: false,
  custom: [
    { name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
  ],
},
columns: {
  firstName: {
    title: 'First Name',
    type: 'string',
  },
  lastName: {
    title: 'Last Name',
    type: 'string',
  },
  username: {
    title: 'Username',
    type: 'string',
  },
  email: {
    title: 'E-mail',
    type: 'string',
  },
  age: {
    title: 'Age',
    type: 'number',
  },
},

};

onCustomAction(event): void {
   
//WHAT TO DO HERE?
   
  }
4

2 回答 2

1

SOLVED

    onCustomAction(event): void {

        //get action name to switch in case of different actions.
        var actionName = event.action; 

        //get row id.
        var id = event.data.id; 

        //navigate to edit/view url.
        this.router.navigate(url) 
    }
于 2020-09-10T21:01:57.987 回答
0

您可以在构造函数中注入 NbdialogService 以在对话框/模态中打开

private dialogService: NbDialogService
  onCustomAction(event) {
   switch (event.action) {
     case 'view-details':
        this.service.getDetails(event.data.Id)
         .pipe(
           tap(res => {
           this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
            context: {
              details: res,
            },
          });
        })
      ).subscribe();
    break;
  default:
    console.log('Not Implemented Action');
    break;
}

或通过 this.router.navigate(url) 确定导航

于 2020-10-10T13:03:59.557 回答