PrimeNG 数据表内联编辑

Question

我将 PrimeNG DataTable 与 Angular 一起使用，并尝试实现与此类似的东西 StackBlitz，但我有两个问题：

我正在成功加载 table，一旦我点击网格函数 editRow(row) 上的编辑按钮，它就失败了（见下面的粗体）

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

error:propert isEditable does not exists on type iToDoList

如何添加（内联）记录到 table，比如添加评论？

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
}

现在我的第二个问题，如何添加行内记录？

Answer 1

对于第二个问题，添加一个按钮，该按钮将从您的组件调用方法 addRow()：

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

此方法会将 IToDoList 类型的对象添加到您的 iToDoList 数组：

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

参见 StackBlitz（从您加入的分支中分叉）

PrimeNG 数据表内联编辑

PrimeNG datatable inline editing

typescript

primeng

angular

primeng-datatable