2016-09-30 17 views
2

primeNG datatableを使用しています。私は、生データの他に、編集/削除アクションを追加したいと思います。問題は、私はフィールドからデータを取得する方法を把握することはできません。どのようにフィールドからデータを取得し、リンクにそれを取得するには? HTMLでprimeng datatable列から値を取得

pois: YourType[]; 
selectedPois: YourType; 

:component.tsから

<p-dataTable [(value)]="pois"> 
<p-column field="value.properties.title" header="title" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column> 
<p-column field="value.properties.description" header="description" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column> 
<p-column field="value.properties.activated" header="activated" [sortable]="true"></p-column> 
<p-column field="id" header="actions"> 
    <template pTemplate> 
    <button class="btn btn-primary" [routerLink]="['/poi/edit/' + id<!--id doesnt work--> ]"><span class="icon">{{"lists.edit"|translate}}</span></button> 
    </template> 
</p-column> 

答えて

1
<p-dataTable [(value)]="pois" 
    selectionMode="single" [(selection)]="selectedPois">> <---add this 

<template pTemplate> 
    <button class="btn btn-primary" [routerLink]="['/poi/edit/' + {{selectedRow.id}} ]"> 
    <span class="icon">{{"lists.edit"|translate}}</span></button> 
</template> 

これは動作するはずですが、それはテストされていません。

+0

{{selectedRow.id}} doesntの仕事。 「選択された」変数に入る他の方法はありますか? – Avocado20

4

解決策が見つかりました。

<p-dataTable [(value)]="pois"> 
<p-column field="value.properties.title" header="title" [filter]="true" filterMatchMode="contains" [sortable]="true"> </p-column> 
<p-column field="value.properties.description" header="description" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column> 
<p-column field="value.properties.activated" header="activated" [sortable]="true"></p-column> 
<p-column field="id" header="actions"> 
    <template pTemplate let-col let-node="rowData"> 
    <button class="btn btn-primary" [routerLink]="['/poi/edit/' + node[col.field] ]"> 
     <span class="icon">{{"lists.edit"|translate}}</span> 
    </button> 
    </template> 
</p-column> 

関連する問題