PrimeNG p-table Editable 列事件回调不起作用

Question

我正在设置一个包含用户详细信息的 table。

我正在使用 Angular 和 PrimeNG。

如何在编辑行和return编辑新数据或标记时取回事件？

还有另一种方式通知该行被修改了吗？

使用这个 table：https://www.primefaces.org/primeng/#/table/edit

示例：

编辑前 ->

{"name":"Mario","surname":"Rossi","mail":"mariorossi@live.it", "phone":"003900000"}

编辑后 ->

{"name":"Mario","surname":"Rossi","mail":"mariorossi@virgilio.it", "phone":"003900000", "flag":"edit"}

提前致谢:)

我已经设置了这些回调，但它们不起作用

(onEdit)="onEdit($event)" (onEditComplete)="onEditComplete($event)"

<p-table [value]="users" >
    <ng-template pTemplate="header">
        <tr>
            <th>Nome</th>
            <th>Cognome</th>
            <th>Email</th>
            <th>Cellulare</th>
            <th>Delete</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-user>
        <tr>
            <td pEditableColumn styleClass="col-button">


                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="user.name">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{user.name}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="user.surname" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{user.surname}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="user.mail" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{user.mail}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="user.phone" required>
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{user.phone}}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td><button text="Elimina Utente" type="button" pButton (click)="removeUser(user)" icon="pi pi-times" class="ui-button-danger" title="Elimina Utente"></button>
            </td>
        </tr>
    </ng-template>
</p-table>

Answer 1

根据 documentation 中的 单元格编辑 部分：

If you require the edited row data or the selected field in the onEditInit, onEditComplete, and onEditCancel events, bind the row data to the pEditableColumn directive and the field to the pEditableColumnField directive.

<td [pEditableColumn]="rowData" [pEditableColumnField]="'year'">

PrimeNG p-table Editable 列事件回调不起作用

PrimeNG p-table Editable Column Event Callback not working

events

edit

primeng

angular