angular - PrimeNG 数据表内联编辑

Question

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

1. 我成功地加载了表格，一旦我点击网格函数 editRow(row) 上的编辑按钮，它就失败了(见下面的粗体)

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

error:propert isEditable does not exists on type iToDoList

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