Question

当我点击 edit（）按钮

时，我正在尝试调用 dataUpdate函数

我正在尝试更新记录

版本：

Angular CLI：10.0.6
角度：10.0.10

registration.component.html

    <div>
      <button type="button" (click)="registration()">Submit</button>
      <div style="margin:5px;"></div>
      <button type="button" (click)="edit()">Edit</button>
    </div>

<h2>List Of Employee</h2>
<ag-grid-angular style="width: 1150px; height: 200px;"
                 class="ag-theme-balham"
                 [rowData]="elist"
                 [columnDefs]="columnDefs"
                 (rowClicked)='onGridRowClicked($event)'>
</ag-grid-angular>

registration.component.ts

  columnDefs = [
    { headerName: 'empid', field: 'empid' },
    { headerName: 'username', field: 'username' },
    { headerName: 'empaddress', field: 'empaddress' },
    { headerName: 'password', field: 'password' },
    { headerName: 'country', field: 'country' },
    {
      headerName: 'Edit',
      
      template: '<span><i class="fa fa-edit" data-action-type="edit"></i></span>',
    }
  ];

  onGridRowClicked(e: any) {
    if (e.event.target !== undefined) {
      let actionType = e.event.target.getAttribute("data-action-type");
      if (actionType == "edit") {

        this.rowData = this.myservice.getExistRecord(e.data.empid).subscribe((data: any) => {
          debugger
          console.log("inside get data from list 1")

          if (data.message == "GetSuccess") {

            //get data from the list
            debugger
            this.txtusername = e.data.username;
            this.txtempaddress = e.data.empaddress;
            this.txtpassword = e.data.password;
            this.txtcountry = e.data.country;

           //after get the data then update a record
           var dataUpdate = function () {
              this.myservice.editExistRecord(e.data.empid, this.txtusername, this.txtempaddress, this.txtpassword, this.txtcountry).subscribe((data: any) => {
                console.log("Inside editExistRecord")
                if (data.message == "UpdateSuccessfully") {
                  this.list();
                }
              });
            }

            console.log("empid", e.data.empid);
            console.log("Edit Icon Clicked");
          }
        });
      }
      else if (actionType == "delete") {
        console.log("View delete action clicked");
      }
    }
  }
 
  edit() {
    console.log("inside edit button click event");
    //dataUpdate();//here I am trying to call dataupdate function
  }

e.data.empid                 //here I am get the empid that is the reason I create a function

如何调用此函数

var dataUpdate = function () {

当用户按下edit（）按钮时，我想调用dataUpdate函数吗？

我从列表中获取数据，但是获取数据后我想对其进行更新

如果我在外部编写此代码，则 empid未定义

Answer 1

对于编辑formValue，您必须在列表中的补丁数据之后向服务器上的post或put请求！

有关更多信息，请检查此Demo

Answer 2

您可以像这样重构您的组件

onGridRowClicked(e: any) {
  if (e.event.target !== undefined) {
    let actionType = e.event.target.getAttribute("data-action-type");
    if (actionType == "edit") {

      this.rowData = this.myservice.getExistRecord(e.data.empid).subscribe((data: any) => {
        debugger
        console.log("inside get data from list 1")

        if (data.message == "GetSuccess") {

          //get data from the list
          debugger
          this.txtusername = e.data.username;
          this.txtempaddress = e.data.empaddress;
          this.txtpassword = e.data.password;
          this.txtcountry = e.data.country;
          this.empId = e.data.empid;
          this.dataUpdate();
          console.log("empid", e.data.empid);
          console.log("Edit Icon Clicked");
        }
      });
    }
    else if (actionType == "delete") {
      console.log("View delete action clicked");
    }
  }
}

//after get the data then update a record
dataUpdate() {
  this.myservice.editExistRecord(this.empId, this.txtusername, this.txtempaddress, this.txtpassword, this.txtcountry).subscribe((data: any) => {
    console.log("Inside editExistRecord")
    if (data.message == "UpdateSuccessfully") {
      this.list();
    }
  });
}

edit() {
  this.dataUpdate();
}

单击按钮时如何调用函数

2 个答案: