Question

我在我的角度项目中使用ng2-smart-table，它的工作符合预期。我只想知道如何在每一行中显示行号。从google上的文档和示例中，我所能想到的就是在数据itslef中设置属性，这不是一个好主意。如果有任何方法或解决方法，请提出建议。这是我的数据设置和到ng2-smart-table的样本数据

settings2 = {
    columns: {
      id: {
        title: 'ID',
        filter: true,
      },
      name: {
        title: 'Fact',
        filter: true,
      },
      description: {
        title: 'Description',
        filter: true,
      },
    },
    actions: {
      add: false,
      edit: false,
      delete: false,
      custom: [
        {
          name: 'view',
          title: `<i class="ti-eye text-success m-r-10" data-target="#view"></i>`,
        },
        {
          name: 'edit',
          title: `<i class="ti-pencil text-info m-r-10" data-target="#update"></i>`,
        },
        {
          name: 'delete',
          title: `<i class="ti-trash text-danger m-r-10"></i>`
        },
      ]
    }
  }

数据-

[{
"id":  "770e6370-cf14-4a0a-b9db-0a6e99b5783b" ,
"list": [
{
"description":  "Coopentity" ,
"type":  "CO_OP"
} ,
{
"description":  "" ,
"type":  "FARM"
} ,
{
"description":  "" ,
"type":  "FACTORY"
} ,
{
"description":  "" ,
"type":  "AUDITING_FIRM"
}
] ,
"name":  "entity_types"
}]

HTML-

 <ng2-smart-table [settings]="settings2" [source]="facts" (custom)="onCustom($event)" class=""></ng2-smart-table>

Answer 1

在智能表格的设置中

index:{
  title: 'sr_no',
  type: 'text',
  valuePrepareFunction: (value,row,cell) => {
    return cell.row.index;
   }
}

Answer 2

如果假设您在component.ts正文中的数据源为：

source: LocalDataSource;

在您的列定义中：

valuePrepareFunction : (val,row,cell)=>{
   const pager = this.source.getPaging();
   const ret = (pager.page-1) * pager.perPage + cell.row.index+1;

   return ret;
}

Answer 3

也许您想在打字稿中获得索引，也许可以为您提供帮助：

以html

<ng2-smart-table #table [settings]="settings" [source]="source"></ng2-smart-table>

在打字稿中

@ViewChild('table', { static: false }) table;
getIndex(columnName: string) {
let index = 0;
  for (const column in this.table.columns) {
    if (column === columName) {
      console.log(index);
    }
  index++;
  }
}

希望这就是您要搜索的内容。

ng2-smart-table行索引

3 个答案: