时间戳

首页 > 解决方案 > 从 PrimeNG 数据表中获取数据

angular - 从 PrimeNG 数据表中获取数据

问题描述

我想启用的功能有点问题。当用户进行搜索时，它会用结果填充一个表。我希望他们能够删除"Delete"按钮所在的那一行。

这是我的表：https ://github.com/BillyCharter87/Tech-O-Dex-UI/blob/58ba15188a490a9c867e0727e56c3efa0a9f6b1e/src/app/table/table.component.html#L21-L25

我console.logs没有显示任何东西是从桌子上抓的，除了

 MouseEvent {isTrusted: true, screenX: 81, screenY: 615, clientX: 81, clientY: 524, …}

并且我的 API 显示了null它应该接收删除的对象。对此有任何指示吗？我有点迷茫，两个小时的研究对我来说似乎没有成果。

谢谢

标签： angularprimeng

解决方案

这是因为您将两个参数传递给onDelete($event, tech)模板中的方法，但在 component 中只定义了一个参数onDelete(value: any)。所以值被设置为$event在这种情况下是 aMouseEvent因为按钮绑定到click事件。

从文档$event 和事件处理语句：

事件对象的形状由目标事件决定。如果目标事件是原生 DOM 元素事件，那么 $event 就是一个 DOM 事件对象，具有 target 和 target.value 等属性。

如果您不需要对象中的信息，请将其从模板中$event的调用中删除。onDelete()

<p-column header="Action">
  <ng-template let-tech="rowData" pTemplate="body">
    <button type="text" pButton label="Delete" (click)="onDelete(tech)"></button>
  </ng-template>
</p-column>

然后onDelete()组件中的方法会获取表格行的值。

public onDelete(value: Tech) {
  console.log(value);
  this.tableService.deleteRegistrant(value)
    .subscribe(
      value => {
        console.log('[POST] create Registrant successfully', value);
      }, error => {
        console.log('FAIL to create Registrants!');
      },
      () => {
        console.log('POST Registrants - now completed.');
      });
  this.submitted = true;
}

推荐阅读