Question

我正在构建一个angular2 web应用程序，我有一个<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <body> <div class="outerContainer"> <section class="container"> <ul class="tabPanel"> <li class="listTabs tab0" role="button"> <span>02</span> <span>OCT</span> </li> <li class="listTabs tab1" role="button"> <span>01</span> <span>OCT</span> </li> <li class="listTabs tab2" role="button"> <span>30</span> <span>SEP</span> </li> <li class="listTabs tab3" role="button"> <span>29</span> <span>SEP</span> </li> <li class="listTabs tab4" role="button"> <span>28</span> <span>SEP</span> </li> </ul> <div class="contentArea"> <a class="contentTitle contentTitleSize">Content Area</a> <div class="subheading"> <span> <strong>First</strong> "Second and Third"::after </span> <span>more info</span> </div> <div class="details"> <p>lots of details</p> </div> </div> </section> <div class="bottomButton"> Click Me</div> </div> </body>元素。列（标题）名称是数字。

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

搜索后，我找不到关于ngx-datatable的大量信息，甚至关于ngx-datatable-column的资源也没有显示甚至在代码中更改列名的可能性。

Answer 1

文档对于此类事项非常全面。所有样本和演示：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>

选项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>

Answer 2

如果只想在视图中看到列标题的名称，可以通过适当地设置名为name和prop的属性来实现，请参见下面的示例。

           <ngx-datatable-column name="My Custom Column Header" prop="client">
            <ng-template let-value="value" ngx-datatable-cell-template>
              <strong>{{ value.clientCode }} </strong> - {{ value.clientName }}
            </ng-template>
          </ngx-datatable-column>

有关更多详细信息，请参考Ngx datatable input documents

干杯！

Answer 3

您可以使用属性名称：

示例：

columnsInput = [
     { prop: 'Id' }, { prop: 'DeviceId', width: 280 },{ prop: 'LogTimeStamp', name: 'Log Time', width: 220 } ]

其中columnInput是ngx-datatable中的[columns]属性

 <ngx-datatable #table class='material' [columns]="columnInput"  [rows]="rowInput"     </ngx-datatable>

这将显示如下内容：

header: [Id      DeviceId         Log Time]
values: [1          111             12121]

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

rowInput: { Id: 1, DeviceId: 111, LogTimeStamp: 12121 }

Answer 4

为表格分配自定义名称
将 createdOn columnName 更改为创建日期

注意：prop(createdOn) 设置值

Unathorized

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

4 个答案: