Можно ли изменить имя ngx-datatable-column?

Question

Я создаю веб-приложение angular2, и у меня есть 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 это свойство [columns] в ngx-datatable

 <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

• Присваивание произвольных имен таблице
• изменение createdOn columnName на Created Date

ПРИМЕЧАНИЕ: 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>

Answer 4

Если вы просто хотите увидеть собственные имена для заголовка столбца в своем представлении, вы можете сделать это, установив соответственно свойства, называемые 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 для получения более подробной информации

Ура!!