Question

我正在使用primeNG数据表。除了原始数据，我想添加编辑/删除操作。问题是，我无法弄清楚，如何从现场进入数据。如何从现场获取数据并将其链接到链接？

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

Answer 1

我找到了解决方案。

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

Answer 2

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

来自component.ts：

pois: YourType[];
selectedPois: YourType;

在html中：

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

这应该可行，但尚未经过测试。

primeng数据表从列获取值

2 个答案: