angular - primeNG 表上的可编辑行问题

标签 angular typescript primeng

在我的 Angular 项目中,我使用 primeNG 库 我正在尝试使数据表中的行可编辑,所以我按照文档进行操作 [ https://www.primefaces.org/primeng/#/table/edit]这样做但我遇到了问题我试图解决它但我失败了。

当我点击编辑按钮时,所有行都变成可编辑的并且应该只有被点击的行?

那么我该怎么做并向服务器发送新数据

我在 stackpiltz 中的代码 [ https://stackblitz.com/edit/angular-1suual?file=src%2Fapp%2Fsuppliers-info%2Fsuppliers-info.component.ts]

澄清

当我点击修改按钮时 会是那样的 it will be like that

在此先感谢您的合作

最佳答案

问题出在您添加的 dataKey 上,它应该是数据中唯一的现有属性名称。由于 col.field 不存在且始终为 null ,因此它正在编辑所有行。

应该改成

<p-table [value]="suppliers" [columns]="cols" editMode="row" dataKey="col.field">

<p-table [value]="suppliers" [columns]="cols" editMode="row" dataKey="id">

这是演示 - https://stackblitz.com/edit/angular-tq7rmc

关于angular - primeNG 表上的可编辑行问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59223622/

相关文章:

javascript - 订阅被调用两次

angular - 范围错误 : Maximum call stack size exceeded Lazy routing Angular 2

rest - 需要帮助理解 angular2 中的接口(interface)和/或抽象类

primeng p-dropdown 不触发更改事件

javascript - 过滤数组并查找拼接索引

angular - window.scrollTo(0, 0) 和 scrollTop = 0 不适用于 Angular 2 路由更改

angular - 如何重置为默认值 bsDateRangePicker

typescript - 如何覆盖或扩展 Typescript 中的库类型定义

angular - 带有货币的 PrimeNG p-inputNumber 不会强制仅使用移动设备输入数字

css - primeNg DataTable 单元格中的溢出文本