是否可以更改ngx-datatable-column名称?

Ami*_*aim 3 javascript datatable angularjs single-page-application ngx-datatable

我正在构建一个angular2 web应用程序,我有一个ngx-datatable元素.列(标题)名称是数字.

有什么办法可以在视图中编辑这些名字吗?

在搜索之后,我找不到很多关于ngx-datatable-column甚至资源的信息,ngx-datatable-column甚至在代码中都没有显示更改列名的可能性.

Ran*_*ake 11

对于此类事项,文档非常全面.所有样品和演示:http://swimlane.github.io/ngx-datatable/

您将在此示例代码中看到更多类型的选项. https://github.com/swimlane/ngx-datatable/blob/1883b3ac1284307bb3dafa4cb299aad6a90b3c10/demo/templates/template-dom.component.ts

你在看什么是ngx-datatable-header-template

选项1

    <ngx-datatable-column name="Your Column Name">
      <ng-template let-column="column" ngx-datatable-header-template>
        <span">{{column.name}}</span>
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.DataField}}
      </ng-template>
    </ngx-datatable-column>
Run Code Online (Sandbox Code Playgroud)

选项2

    <ngx-datatable-column>
      <ng-template ngx-datatable-header-template>
        <span>Your Column Name</span>
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.DataField}}
      </ng-template>
    </ngx-datatable-column>
Run Code Online (Sandbox Code Playgroud)


小智 7

您可以使用属性名称:

例子:

columnsInput = [
     { prop: 'Id' }, { prop: 'DeviceId', width: 280 },{ prop: 'LogTimeStamp', name: 'Log Time', width: 220 } ]
Run Code Online (Sandbox Code Playgroud)

其中columnInput是在[列]属性NGX-数据表

 <ngx-datatable #table class='material' [columns]="columnInput"  [rows]="rowInput"     </ngx-datatable>
Run Code Online (Sandbox Code Playgroud)

这将显示如下内容:

header: [Id      DeviceId         Log Time]
values: [1          111             12121]
Run Code Online (Sandbox Code Playgroud)

Id/DeviceId/LogTimeStamp 实际上是您在 中分配的对象[rows],因此对于此示例,您的行应该类似于:

rowInput: { Id: 1, DeviceId: 111, LogTimeStamp: 12121 }
Run Code Online (Sandbox Code Playgroud)