Angular 在priming中使用行编辑时存在两个问题

在我的角度项目中，我使用素数。我试图使数据表中的行可编辑，所以我按照文档进行操作，但我面临两个问题。我试图解决它们，但失败了

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

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

放置404（未找到）

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

**服务台**

  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)

    } 
}

clientsUrl=”http://localhost:4200/api/clints"
客户：客户；
构造函数（私有http:HttpClient）{}
getAllClient（）：可观察{
返回this.http.get（this.clientsUrl）；
}
addClient（）{
//this.client=新客户机（）；
返回this.http.post（this.clientsUrl，this.client）
}
editClient（）{
返回this.http.put（this.clientsUrl+“/”+this.client.id，this.client）
} 
}

谢谢你的帮助

更新

---

请原谅，您可以查看此链接的第一个stackblitz

使用

中的“dataKey”，此问题将得到解决。

如果您提供重现此问题的stackblitz，将很容易。感谢您的支持。非常感谢您的合作。您可以查看此链接[对不起，它的第一个堆栈Blitz非常感谢，我现在使用的是.dateKey=“id”。但我有另一个问题，当我使用modal或confirm消息多次重复时，您是否有任何解决方案此caseModal或confirm消息是一个数组。因此，请确保在显示它时清空数组。

  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)

    } 
}