primeng DataTablesでHTMLテンプレートを使用するにはどうすればよいですか？

Question

Primengの​​dataTableを使用していますが、ヘッダーの値としてHTMLコードを設定する方法が見つかりません。私は、テーブルの最初のヘッダーを設定する必要が

は、チェックボックス/ラジオですが、私は唯一の私はDataTableのテンプレートを認識していp-column

でheaderプロパティを使用してテキストを追加することができます。これはどのように使用できますか？

Here I want to set checkbox instead of text in header (first row)

任意のアイデア？

Answer 1

プラディープ、ラジオやチェックボックスのための「一」と「複数の」オプションとして選択モードをサポートし、26 7月にリリースさ

PrimeNGベータ-11。

のRadioButton：

<p-column [style]="{'width':'38px'}" selectionMode="single"></p-column> 

チェックボックス：

<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> 

あなたがここで詳細情報を見つけることができます - http://www.primefaces.org/primeng/#/datatableselection

Answer 2

PrimeNG Beta.14は、ヘッダーとフッターのセクションでテンプレートをサポートしています。

デフォルトでは、対応する行のフィールドデータがセルの内容として表示されます。テンプレートに渡される暗黙の変数が列定義であり、現在の行のデータがrowDataプロパティであるテンプレートを使用してカスタマイズできます。さらに、現在のインデックスには、オプションのrowIndex変数を使用してアクセスできます。同様に、テンプレートを使用してカスタムコンテンツを列のヘッダーとフッターに配置することもできます。

列内のテンプレートは、テンプレートが属する場所を示すために、typeプロパティと共にpTemplateディレクティブで修飾する必要があります。可能な値は、 "header"、 "body"、 "footer"です。

<p-column field="color" header="Color"> 
    <template let-col #car="rowData" #ri="rowIndex" pTemplate type="body"> 
     <span">{{car[col.field]}}</span> 
    </template> 
</p-column> 
<p-column> 
    <template pTemplate type="header"> 
     <button type="button" pButton (click)="selectAllCars()" icon="fa-check"></button> 
    </template> 
    <template let-car="rowData" pTemplate type="body"> 
     <button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button> 
    </template> 
</p-column> 

Answer 3

Angular 4とPrimeNG 4では、テンプレートはng-templateの方が推奨されていません。

次のコードは、ng-templateを使用してPrimeNG p-dataTableコンポーネントにリンクを追加する方法を示しています。

<p-dataTable [value]="myStore.myList | async"> 
<p-column field="name" header="Name"> 
    <ng-template let-col let-myItem="rowData" pTemplate="body"> 
    <a href="#" (click)="selectItem(myItem);"> 
     {{myItem[col.field]}} 
    </a> 
    </ng-template> 
</p-column> 
... 

タグ「のlet-colが、」暗黙のコンテキスト変数$を経由して、テンプレート内で使用するためのColumnオブジェクトが使用可能になります。可能なすべてのフィールドを表示するには、PrimeNG共通のshared.d.tsソースファイル内の列を参照してください。かなりの数があります。

タグ

let-myItem="rowData" 

は、テンプレートに全体rowDataフィールドが使用可能になります。

別のタグが聞かせて、私が使用するための現在の行のインデックスが利用できるようになります：テンプレートは各テンプレートを関連付ける方法を決定するために使用されている場合

let-ri="rowIndex" 

pTemplateディレクティブはPrimeNGのDataTableによって必要とされます。可能な値は、 "header"、 "body"、 "footer"です。 PrimeNG DataTable Documentation