PrimeNG p-таблица Редактируемый обратный вызов события столбца не работает - PullRequest
Новая
       31

PrimeNG p-таблица Редактируемый обратный вызов события столбца не работает

0 голосов
/ 20 мая 2019

Я настраиваю таблицу с информацией о пользователях.

Я использую 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>

1 Ответ

1 голос
/ 28 мая 2019

Согласно разделу Редактирование ячеек в документации :

Если вам требуются данные отредактированной строки или выбранное поле в События onEditInit , onEditComplete и onEditCancel , связывают данные строки с директивой pEditableColumn и полем с директивой pEditableColumnField. 

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