Question

我想要启用的功能有点问题。当用户进行搜索时，它会使用结果填充表格。我希望他们能够删除"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。有关于此的任何指示？我有点失落，似乎两个小时的研究对我来说并不富有成效。

由于

Answer 1

这是因为您在模板中向onDelete($event, tech)方法传递了两个参数，但只在组件onDelete(value: any)中定义了一个参数。因此，该值设置为$event，在这种情况下为MouseEvent，因为该按钮已绑定到click事件。

来自文档$event and event handling statements：

事件对象的形状由目标事件决定。如果目标事件是本机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;
}

从PrimeNG数据表中抓取数据

1 个答案: