2016-09-30 5 views
2

bin mit PrimeNG Datentabelle. Neben den Rohdaten möchte ich auch Aktionen zum Bearbeiten/Löschen hinzufügen. das Problem ist, ich kann nicht herausfinden, wie man in Daten vom Feld kommt. Wie man Daten vom Feld erhält und es in Verbindung bringt?Primeng Datentabelle erhalten Wert von Spalte

<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> 

Antwort

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

Von component.ts:

pois: YourType[]; 
selectedPois: YourType; 

Im html:

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

Dies sollte funktionieren, aber es wurde nicht geprüft.

+0

{{selectedRow.id}} funktioniert nicht. Gibt es eine andere Möglichkeit, in die "ausgewählte" Variable zu gelangen? – Avocado20

4

Ich fand Lösung.

<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> 

Verwandte Themen