NG2-智能表行索引

Question

我在我的angular项目中使用了ng2-smart-table，它的工作效果与预期一致。我只想知道如何在每一行中显示行号。如果有任何方法或解决办法，请建议。下面是我的数据设置和我的NG2智能表中的样本数据

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正文中dataSource为：

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++;
  }
}

希望这就是你要找的。