在 PrimeNG 中使用行编辑时的两个问题

Question

在我的 angular 项目中，我使用 PrimeNG。我试图在数据 table 中创建行 editable 所以我按照文档来做，但我面临两个问题。我试图解决它们但我失败了。

第一个：当我点击编辑按钮时，所有行都变成了 editable 并且应该只有被点击的行？

第二个：编辑仅在客户端完成，没有发送和编辑到 API，这是控制台中的错误消息：

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

这是我的**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)

    } 
}

感谢任何帮助

更新

你可以检查这个 link https://stackblitz.com/edit/angular-6fkyui?file=src%2Fapp%2Fclients%2Fclients.service.ts] 不好意思这是第一个 stackblitz

Answer 1

在<p-table>中使用"dataKey"，这个问题就解决了。

在 PrimeNG 中使用行编辑时的两个问题

Two issues when I use row editing in PrimeNG

typescript

primeng

angular

primeng-turbotable