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

Question

我正在構建一個 angular2 Web 應用程序，並且我有一個ngx-datatable元素。 列（標題）名稱是數字。

有什么辦法可以在視圖中編輯這些名稱嗎？

搜索之后，我無法找到很多有關信息ngx-datatable-column ，甚至認為是關於資源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

您可以使用屬性名稱：

例子：

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 3

如果您只想在視圖中查看您自己的列標題名稱，您可以通過適當設置名為 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 數據表輸入文檔以獲取更多詳細信息

干杯！！

Answer 4

• 為表分配自定義名稱
• 將 createdOn columnName 更改為創建日期

注意：prop(createdOn) 設置值

<ngx-datatable-column class="bootstrap" name="Created Date" prop="createdOn">                                               
    <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
         {{value}}
    </ng-template>
</ngx-datatable-column>