单击按钮时如何调用函数

Question

我试图在单击 edit() 按钮时调用 dataUpdate 函数

我正在尝试更新记录

版本：

Angular命令行界面：10.0.6
Angular: 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();
}

单击按钮时如何调用函数

how to call a function in when button click

typescript

ag-grid

angular-cli

angular