2

我无法在actions选项卡上显示自定义图标ng2-smart-table。我已经安装了Eva图标Akevo Team，我想使用它们。我已更改编辑按钮以显示一些自定义图标，但问题是什么都没有出现。在删除的左侧，必须出现一个画笔图标。

这是有问题的图像：

在此处输入图像描述

这是代码：

 settings = {
    edit: {
      editButtonContent: '<nb-icon icon="brush"></nb-icon>',
      saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
      cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
    },
    columns: {
      device: {
        title: 'Device',
        sortDirection: 'asc'
      },
      type: {
        title: 'Type',
        sort: false,
        filter: false
      },
      serialNumber: {
        title: 'Serial Number'
      },
      status: {
        title: 'Status'
      }
    }
  };
4

5 回答 5

1

试试这个 ：

settings = {
hideSubHeader: true,
actions: {
  custom: [
    {
      name: 'edit',
      title: '<nb-icon icon="brush"></nb-icon>'
    },
    {
      name: 'save',
      title: '<nb-icon icon="checkmark"></nb-icon>'
    },
    {
      name: 'cancel',
      title: '<nb-icon icon="close-circle"></nb-icon>'
    }
  ],
  add: false,
  edit: false,
  delete: false
}
...
};

希望这对你有用！

于 2019-07-15T12:39:54.843 回答
1

您也可以使用其他图标集，例如material icons，只需将其添加到您的项目中，然后更改您的设置，例如：

 settings = {
    edit: {
      editButtonContent: '<span class="material-icons">mode_edit</span>',
      saveButtonContent: '<span class="material-icons">check_circle</span>',
      cancelButtonContent: '<span class="material-icons">cancel</span>'
    },
    /* ... */
 }
于 2021-02-23T09:44:02.127 回答
1 

settings = {
    hideSubHeader: true,
    sort: true,
    actions: {
      position: 'left',
      add: false,
      edit: false,
      delete: false,
      select: false,
      custom: [
        {
          name: 'viewRecord',
          type: 'html',
          title: '<i class="far fa-file-alt" title="View Record"></i>',
        },
        {
          name: 'editRecord',
          type: 'html',
          title: '<i class="far fa-edit" title="Edit Record"></i>',
        },
      ],
    },
    columns: {
      column1: {
        title: 'Column 1',
        type: 'string',
        width: '35%',
      },
      column2: {
        title: 'Column 2',
        type: 'string',
      },
      column3: {
        title: 'Column 3',
        type: 'string',
      },
    },
  };

于 2021-03-22T23:32:59.187 回答
0

我找到了这个线程： https ://github.com/akveo/ng2-smart-table/issues/1034

正如最后一条评论中提到的那样：

暂时使用旧的 nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons

我下载了所需图标的 SVG 并将它们添加为：

settings = {
  edit: {
    editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
    . . .
  }
. . .
}

工作得很好。

于 2020-08-06T05:57:23.427 回答
0 
let newSettings = {
           mode: "external",
           actions: {
               add: false,
               edit: false,
               delete: false,
               position: 'right'
           },
           hideSubHeader: true,
           add: {
               addButtonContent: '<i class="nb-plus"></i>',
           },
           edit: {
               editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
           },
           delete: {
               deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
               confirmDelete: true,
           },
}
于 2021-03-07T21:30:27.910 回答