Question

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

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

this.iToDoList.filter（row =＆gt; row.isEditable ）。map（r =＆gt; { r.isEditable = false; return r}）< / p>

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

如何在表格中添加（内联）记录，例如添加评论？

HTML

DECLARE @size AS INT =0
DECLARE @id AS INT

WHILE (@size<100000)
BEGIN
    SET @id = ( @size % 24 ) + 1;
    INSERT INTO <table> VALUES (@id , values...) 
    SET @size = @size+1
END

接口

   <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>

component.ts

export interface IToDoList {

    ID: number,
    Comment: string
}

*************** **** UPDATE ********************************************* ******* 我通过将界面更改为

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;
    }

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

Answer 1

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

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

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

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

请参阅StackBlitz（与您加入的人分开）

PrimeNG数据表内联编辑

1 个答案: