Angular：如何使用 aggrid 和 HttpClient delete 从我的 json 服务器中删除用户？

Question

所以我在这里有点迷路。我有一个 json 文件，我从中获取数据。我执行了一个 get 请求，并且混合了一些 rxjs 运算符，这样当我添加新数据时，它会自动更新。此数据在我的网格中显示如下：

     this.columnDefs = [
      { headerName: 'id', field: 'id', hide: true },
      {headerName: 'First Name', field: 'firstName' },
      {headerName: 'Last Name', field: 'lastName' },
      {headerName: 'Email', field: 'email'},
      {headerName: 'File Type', field: 'fileType'},
      {
        headerName: '',
        field: '_id',
        cellRendererFramework: RemoveButton,
        colId: "params",
        width: 100
      }

  ];

我在网格的每一行中都有一个删除按钮。我试图让这个按钮通过 http.delete 请求从网格和服务器中删除数据。据我了解，我会检索行 ID，然后在我的服务 class:

中执行类似的操作

    deleteUser(id: number): Observable<void> {
  return this.http.delete<void>(`${this._url}/${id}`).pipe(
    catchError(this.handleErrorObservable))
}

但是我无法从我的数据网格中正确检索用户 ID。当运行此代码时，我收到一条错误消息，指出 id 未定义。如果我想检索 firstName、lastName 等，情况也是一样。我不确定如何从 json 服务器正确检索 id，以便我可以识别该行，并执行删除请求。我需要以某种方式让行中的每个按钮获取该特定行的 ID，然后根据该信息删除数据。如果有帮助，这是我的删除按钮的 html：

  template: `<span><button style = "height: 20px" (click)="delete()"> X </button></span>`

谢谢！

编辑：这里是删除按钮组件class:

    @Component({
  selector: 'app-remove-button',
  styleUrls: ['./remove-button.component.css'],
  template: `<span><button style = "height: 20px" (click)="delete()"> X </button></span>`
})
export class RemoveButton implements ICellRendererAngularComp {
  public params: any;
  employee: Employees //Model
  constructor( private service: Service) { }

@Input() id: number;

  agInit(params: any): void {

    this.params = params;
  }

delete(id) {
  id = this.employee.id;
  this.service.deleteUser(id).subscribe(
    ()=> console.log(`Employee with Id = ${this.employee.id}deleted`),
    (err) => console.log(err)
  );
}

refresh() {
  return true;
  }

}

Answer 1

它是 undefined，因为您没有向 delete() 传递任何参数。您没有 post 足够的代码来修改它，但这应该可以帮助您入门。

它似乎就像你的删除按钮是一个组件，所以你应该将 id 作为 @Input() id: number并在 table 调用 <del [id]="row.id"></del>.

组件的模板应该是：

template: `<span><button style = "height: 20px" (click)="delete(id)"> X </button></span>`

及删除方法：

delete(id) {
  this.service.deleteUser(id).subscribe(
    ()=> console.log(`Employee with Id = ${this.employee.id}deleted`),
    (err) => console.log(err)
  );
}

Angular：如何使用 aggrid 和 HttpClient delete 从我的 json 服务器中删除用户？

Angular: How can I delete a user from my json server using aggrid and HttpClient delete?

httpclient

ag-grid

angular