PrimeNG 数据表内联编辑

Question

我正在使用带有 Angular 的 PrimeNG DataTable 并尝试实现类似于 StackBlitz 的东西，但我有两个问题：

1. 我正在成功加载表格，一旦我单击网格函数 editRow(row) 上的编辑按钮，它就会失败，原因是（见下面的粗体字）

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

错误：类型 iToDoList 上不存在属性 isEditable

1. 如何向表中添加（内联）记录，例如添加注释？

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（从你加入的那个派生出来的）