Question

我目前正在使用角度数据表https://l-lin.github.io/angular-datatables/#/welcome

进行开发

在我构建的页面中，它有用于添加新记录的按钮（导航到表单组件），在数据表中每行都有操作按钮进行编辑和删除（导航到表单组件（添加新组件的相同组件）记录））

添加新记录的功能：

addNew():void{
        this._router.navigate(['../employee_termination_request_form/add/new'],{ relativeTo: this.route });
    }

列有操作按钮：

{
    data: null,
    width:'10px',
    render: function (data, type, row) {
        return `
        <div class="dropdown">
        <button class="btn btn-inline-table dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="glyphicon glyphicon-option-vertical"></i>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="top:-10px; left:-125px">
        <span class="dropdown-item editBtnTransactTerminationRequest">Edit</span>
        <span class="dropdown-item deleteBtnTransactTerminationRequest">Delete</span>
        </div>
        </div>
        `;
    }
}

在OnNgInit中，我添加了操作按钮的处理程序：

$(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
    this.editData();
});

当用户点击编辑按钮时，它将是editData函数，它将重定向到表单组件。

editData():void { console.log(this.selectedData)
        if(this.toEdit=="1"){
            if(this.selectedData.requeststatus=="DRAFT")
                this.zone.run(()=>this._router.navigate(['../employee_termination_request_form/edit/'+this.selectedData.employeeid],{ relativeTo: this.route }));
            else{
                this.zone.run(()=>this.dialog.open(AlertDialog,{
                    data:{
                        dialogtitle:'Alert',
                        dialogcontent:'Request has been submitted and can not be edited!'
                    }
                }));
                $(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
                    this.editData();
                });
            }
        }else{
            this.zone.run(()=>this.dialog.open(AlertDialog,{
                data:{
                    dialogtitle:'Unauthorized Access',
                    dialogcontent:'You are not authorized to access this menu!'
                }
            }));
            $(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
                this.editData();
            });
        }
}

现在问题是，当用户单击“添加”按钮时，页面将加载表单页面，并在返回时单击“编辑”按钮。编辑按钮的处理程序将被调用两次。当我使用console.log跟踪它时，第一个selectedData为空（值取决于在ngoninit中初始化的值），第二个是我选择的行的值（正确的值）。任何人都可以帮我找出解决方案吗？

调用两次事件处理程序（角度）

0 个答案: