web-dev-qa-db-ja.com

ngx-datatable-column名を変更することは可能ですか？

私はangular2Webアプリケーションを構築していて、ngx-datatable要素があります。列（ヘッダー）の名前は数字です。

ビューでそれらの名前を編集する方法はありますか？

検索後、ngx-datatable-columnに関する多くの情報を見つけることができず、ngx-datatable-columnに関するリソースでさえ、コード内でも列名を変更する可能性を示していませんでした。

javascriptangularjsdatatablesingle-page-applicationngx-datatable
3
Amit Haim

ドキュメントはそのような問題について非常に包括的です。すべてのサンプルとデモ： 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>
8
Randika Ratnayake

プロパティ名を使用できます。

例：

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 }
0
Ubaldo Reyes

ビューに列ヘッダーの独自の名前を表示したいだけの場合は、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 を参照してください。

乾杯!!

0
puneetShanbhag