angular - primeng 数据表格从列获取值
我正在使用 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>
答案#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>
答案#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>
这应该可行,但尚未经过测试。
