angular - 如何在 Angular 2 中使用单击按钮使单个 Primeng DataTable 行可编辑

Question

我正在尝试在 Angular 2 中使用 Primeng 的 DataTable。

我正在数据表中显示一组行，其中有一列用于编辑按钮。

单击任何行的编辑按钮时，该行的所有字段都应可编辑。

HTML:

 <p-dataTable [value]="testcases" [(selection)]="selectedTestCases" dataKey="ModuleID" [editable]="true" sortMode="multiple">
         <p-column [style]="{'width':'10 px'}" selectionMode="multiple"></p-column>
        <p-column field="ModuleID" [editable]="isEditable" header="ModuleID"></p-column>
        <p-column field="TestCaseID" [editable]="isEditable" header="TestCaseID"></p-column>
        <p-column field="EstimatedTime" [editable]="isEditable" header="EstimatedTime"></p-column>
          <p-column field="isEditable"  header="Edit" [editable]="isEditable">
                <ng-template let-col let-row="rowData" let-index="rowIndex"  pTemplate="body" >
                    <span>
                        <input type="button" value="Edit" (click)="edit(row,index)" /> 
                    </span>
                </ng-template>

          </p-column>

Angular 分量:

edit(rowdata:TestCases,index:number) {

this.selectedTestCases=rowdata
rowdata.isEditable=true;
 }

使用此代码，该行的属性设置为可编辑，但在 UI 中字段不可编辑。

我做错了什么吗？

感谢任何帮助。

Answer 1

在 rowClick 上使用此函数来获取单击的行 -

     onRowSelectClick(e){
           console.log(e);
           this.CloseAllEditable();
           e.data.isEditable=true;
      }
    CloseAllEditable(){
        for(let item of this.testcases){
          if(item.isEditable){
            item.isEditable = false;
          }
        }
      }

    <p-column field="EstimatedTime" header="EstimatedTime">
        <template let-col let-row="rowData" let-index="rowIndex"  pTemplate="body">
            <span *ngIf="!row.isEditable">{{row.EstimatedTime}}</span>
           <span *ngIf="row.isEditable"><input type="text" [(ngModel)]="row.EstimatedTime"></span>
        </template>
       </p-column>