Question

我正在建立一个包含用户详细信息的表。

我正在使用Angular和PrimeNG。

在编辑行时如何获取事件并返回已编辑的新数据或标志？

还有另一种方式通知行已修改吗？

使用此表：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中的单元格编辑部分：

如果您需要编辑的行数据或 onEditInit ， onEditComplete 和 onEditCancel 事件中的选定字段，请将行数据绑定到pEditableColumn指令和pEditableColumnField指令的字段。

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

PrimeNG p表可编辑列事件回调不起作用

1 个答案: