Two issues when I use row editing in PrimeNG

Question

In my angular project, I use PrimeNG. I'm trying to make the rows editable in data table so I follow the documentation to do that but I face two issues. I tried to solve them but I failed.

The first one: when I click in the edit button all rows become editable and supposed to be only the row was clicked on?

The second one: the editing is done on client-side only and didn't send and editing to API and this is an error message in the console:

PUT http://localhost:4200/api/clints/0 404 (Not Found)

this is my ** HTML **:

<p-table #dataTbl id="printTbl" 
            [columns]="cols" 
            [value]="clients" 
            [scrollable]="true" 
            [paginator]="false"
            [rows]="2" scrollHeight="200px" 
            [resizableColumns]="false" 
            selectionMode="multiple"
            [(selection)]="selectedClient" 
            emptyMessage="عفواً يرجي إدخال بيانات أولاً"
            editMode="row">
...
 <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex" let-columns="columns">
                    <tr [pSelectableRow]="rowData" [pEditableRow]="rowData" >
                        <ng-container >              
                        <td  class="ui-resizable-column" *ngFor="let col of columns">
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input pInputText type="text" [(ngModel)]="rowData[col.field]"/>
                                </ng-template>
                                <ng-template pTemplate="output">
                                        {{ rowData[col.field] }}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td class="text-center">
                            <button *ngIf="!editing" pButton type="button" pInitEditableRow (click)="onRowEditInit(rowData)" class="btn btn-info">
                                <span class="fa fa-edit"></span>
                            </button>
                            <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check" class="ui-button-success" style="margin-right: .5em" (click)="onRowEditSave(rowData)"></button>
                            <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times" class="ui-button-danger" (click)="onRowEditCancel(rowData, ri)"></button>
                            <button class="btn btn-danger">
                                <span class="fa fa-trash"></span>
                            </button>
                        </td>
                        </ng-container>
                    </tr>
                </ng-template>
            </p-table>

** component.ts **

  private myForm: FormGroup;
  clients: Clients[];
  selectedClient: Clients[];
  clonedClient: { [s: string]: Clients; } = {};
  cols: any[];
  exportColumns: any[]; 
  display: boolean = false;
constructor(private formBuilder: FormBuilder,
    private Service: ClientsService, 
    private messageService: MessageService) { }
ngOnInit() {

    this.refreshList();
this.cols = [
      { field: 'id', header: '#' },
      { field: 'name', header: 'الاسم' },
      { field: 'phone', header: 'الهاتف' },
      { field: 'address', header: 'العنوان' },
      { field: 'account', header: 'الحساب' },
      { field: 'nots', header: 'ملاحظات' },
    ];
}
refreshList() {this.Service.getAllClients()
    .subscribe(data => this.clients = data);
  }

  PostClient() {

      this.Service.addClient().subscribe(res => {
        this.messageService.add({severity:'success', summary: 'عملية ناجحة', detail:'تمت الإضافة بنجاح'}); // show success massage
        this.refreshList();
      },
        err => {
          console.log(err)
        })
    }

  onRowEditInit(client: Clients){
    this.clonedClient[client.id]={...client}
  }
  onRowEditSave(client: Clients){


      this.Service.editClient().subscribe(res => {
        this.messageService.add({severity:'success', summary: 'عملية ناجحة', detail:'تم النحديث بنجاح'}); // show success massage
        this.refreshList();

      },
          err => {
          console.log(err)
        })
    }

  onRowEditCancel(){


  }

** service.ts **

  clientsUrl="http://localhost:4200/api/clints"

  client:Clients;


  constructor(private http:HttpClient) { }
getAllClients():Observable<Clients[]>{
    return this.http.get<Clients[]>(this.clientsUrl);

}
addClient(){
  // this.client= new Clients();
return this.http.post(this.clientsUrl,this.client)

  }

editClient(){
  return this.http.put(this.clientsUrl + "/" + this.client.id,this.client)

    } 
}

I appreciate any help

Update

you can check this link https://stackblitz.com/edit/angular-6fkyui?file=src%2Fapp%2Fclients%2Fclients.service.ts] Excuse me its first stackblitz

Answer 1

Use "dataKey" in <p-table> and this problem will be solved.