Встроенное редактирование данных PrimeNG - PullRequest
Новая
       6

Встроенное редактирование данных PrimeNG

0 голосов
/ 23 мая 2018

Я использую PrimeNG DataTable с Angular и пытаюсь реализовать что-то похожее на это StackBlitz , и у меня есть две проблемы:

  1. Я успешно загружаю таблицу икак только я нажимаю кнопку редактирования в функции сетки editRow (строка), происходит сбой из-за (см. жирный шрифт ниже)

    this.iToDoList.filter (row => row.isEditable ).map (r => { r.isEditable = false; возврат r})

ошибка: свойство isEditable не существует для типа iToDoList

Как добавить (встроенную) запись в таблицу, например добавить комментарий?

HTML 

   <p-table #dt  [value]="iToDoList" dataKey="ID"  [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
                             [rows]="10">

                        <ng-template pTemplate="header">
                            <tr>
                                <th>ID</th>
                                <th>Comment</th>
                                <th>Action</th>

                            </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-row>  
                                <tr>
                                    <td>{{row.ID}}</td>
                                    <td>
                                        <div  *ngIf="!row.isEditable">{{row.Comment}}</div>
                                        <div *ngIf="row.isEditable">
                                            <input type="text" [(ngModel)]="row.comment">
                                        </div>
                                    </td>
                                    <td><button (click)="editRow(row)">Edit</button></td>
                                    <td>                                <button (click)="save(row)">Save</button></td>
                                </tr>
                            </ng-template>
            </p-table>

Интерфейс 

export interface IToDoList {

    ID: number,
    Comment: string
}

component.ts 

iToDoList: IToDoList[] = null;

ngOnInit(): void {
           //this is loading the table successfully 
           this.GetToDoList(this.userID);
    }

  GetToDoList(ID: string) {
        this._dashboardService.getToDoList(ID)
            .subscribe(
            data => {
                this.iToDoList = data.result;

                data.map(row => {
                    row.isEditable = false;
                });    
            },
            error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
    }
//issue is here
  editRow(row) {
        console.log("row " + row.ID)

             this.iToDoList.filter(row => row.isEditable).map(r => { r.isEditable = false; return r })
        row.isEditable = true;
    }

***************************************************ОБНОВИТЬ**************************************************** Я исправил свою первую проблему, изменив интерфейс на 

export interface IToDoList {

    ID: number,
    Comment: string,
    isEditable: boolean
}

Теперь мой второй вопрос, как добавить встроенную запись?

1 Ответ

0 голосов
/ 23 мая 2018

Для второго выпуска добавьте кнопку, которая будет вызывать метод addRow() из вашего компонента: 

<button (click)="addRow()">Add row</button>

Этот метод добавит объект типа IToDoList к вашему iToDoList массив: 

addRow() {
    this.iToDoList = [...this.iToDoList];
    this.iToDoList.push({Comment: "", isEditable: true});
  }

См. StackBlitz (разветвленный от того, к которому вы присоединились)

...