html - turboTable 启动输入 enterKey

Question

使用primeng TurboTable的incell编辑，我试图通过点击回车键来执行一个方法。这是以下代码：

    <td pEditableColumn>
       <p-cellEditor>
      <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" (keyup.enter)="onKeyPress($event)">
      </ng-template>
      <ng-template pTemplate="output">
        {{rowData.vin}}
      </ng-template>
    </p-cellEditor>
  </td>

问题是方法onKeyPress不是通过点击enterKey来执行的。所以我尝试了keypress以下方法：

    <td pEditableColumn>
       <p-cellEditor>
      <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" (keypress)="onKeyPress($event)">
      </ng-template>
      <ng-template pTemplate="output">
        {{rowData.vin}}
      </ng-template>
    </p-cellEditor>
  </td>

我注意到的是，该方法onKeyPress是通过单击除输入键之外的任何按钮来执行的。

Answer 1

我认为 onEditComplete 事件捕获了输入键。检查事件下的https://www.primefaces.org/primeng/#/table。

要在输入键上调用您的函数，您可以执行以下操作：

<p-table ... (onEditComplete)="onEditComplete($event)">
...
<td [pEditableColumn]="rowData" pEditableColumnField="'vin'">

In your component:
onEditComplete(event) {
  console.log(event.data);
}

Answer 2

我尝试使用keydown而不是Keyup它工作正常

<td pEditableColumn>
   <p-cellEditor>
     <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" 
               (keydown.enter)="onKeyDown($event)">
     </ng-template>
     <ng-template pTemplate="output">
                {{rowData.vin}}
     </ng-template>
   </p-cellEditor>
</td>