How to make a single Primeng DataTable row editable on a button click using in Angular 2

问题

I am trying to use DataTable from Primeng in Angular 2.

I am displaying set of rows in datatable having a column for Edit button.

On click of edit button of any row, all fields of that row should be editable.

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

edit(rowdata:TestCases,index:number) {

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

With this code, property of that row is set to editable, but in UI fields are not editable.

Am I doing anything wrong?

Any help is appreciated.

回答1:

use this function on rowClick to get the clicked row -

     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>

回答2:

I had a similar problem, and resolved it using 2 divs in each p-column, one for showing the data if the row isn't editable, and another div if the row it's editable.

Something like this.

<p-column field="ModuleID" [editable]="isEditable" header="ModuleID">
    <ng-template let-row="rowData" pTemplate="body">
        <div *ngIf="!row.isEditable">{{row.ModuleID}}</div>
        <div *ngIf="row.isEditable">
          <input type="text" [(ngModel)]="row.ModuleID">
        </div>
    </ng-template>
</p-column>

来源：https://stackoverflow.com/questions/45612676/how-to-make-a-single-primeng-datatable-row-editable-on-a-button-click-using-in-a

标签

angular

primeng