Question

我有一个 p表，其中包含可编辑的列。我需要做的是，当更改字段 Year 的值时，我可以使用它。首先，我希望能够在控制台上显示它。为此，我使用了onEditComplete功能

HTML文件：

    <p-table [columns]="cols" [value]="cars">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th>ID</th>
                <th>Year</th>            
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td pEditableColumn>
                    <p-cellEditor>
                        <ng-template pTemplate="input ">
                            <input type="text" [(ngModel)]="rowData.id">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.id}}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td pEditableColumn [pEditableColumn]="rowData"
 [pEditableColumnField]="'year'" (onEditComplete)="onEditComplete(rowData)">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input type="text" [(ngModel)]="rowData.year" required>
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{rowData.year}}
                        </ng-template>
                    </p-cellEditor>
                </td>
              <td pEditableColumn>           
            </tr>
        </ng-template>
    </p-table>

TS文件：

onEditComplete (event) {console.log(event);}

但是通过更改 Year 字段，然后按Tab或Enter，我没有任何输出。您能帮我找出问题吗？

Answer 1

我通过从(onEditComplete)="onEditComplete(rowData)"中删除td并将(onEditComplete)="onEditComplete($event)"添加到p-table来解决了这个问题：

<p-table [columns]="cols" [value]="cars" (onEditComplete)="onEditComplete($event)">
      //........
      <td pEditableColumn [pEditableColumn]="rowData" [pEditableColumnField]="'year'" >
      //...
</p-table>

onEditComplete不起作用

1 个答案: