Javascript 在函数中获取主类对象而不使用arrow函数

在我的angular项目中，我使用datatable，其中有行分组和行回调

数据表选项

openPositionDatatableOptions = {
    sDom: 'rt<"bottom"p>',
    ajax: (data, callback, settings) => {
      this.service.getOpenPositions()
        .map(data => data.json().data).catch(this.handleError)
        .subscribe(jsondata => {
          this.openPositionsData = jsondata;
          jsondata.forEach(element => {
            if (element.side === 'SLD') {
              element.openQuantity = '-' + element.openQuantity;
            }
            element['delta'] = 0;
            element['pl'] = 0;
          });
          if (jsondata) {
            callback({
              aaData: jsondata
            });
          }
        },
        error => {
          this.notifiicationAlert('Some Error Occured While Retrieving Positions Data', 'WARNING');
        });
    },

    columns: [
      { data: 'account.brokerId' },
      { data: 'contract.localSymbol' },
      { data: 'openQuantity' },
      { data: 'delta' },
      { data: 'pl' },
      {
        data: null,
        orderable: false,
        defaultContent:
          '<a class="fa fa-remove" style="color:#8B0000"></a>',
        responsivePriority: 2
      }
    ],
    //Grouping By Row Logic
    "columnDefs": [
      { "visible": false, "targets": 0 }
    ],
    "order": [[0, 'asc']],
    "drawCallback": function (settings) {
      var api = this.api();
      var rows = api.rows({ page: 'current' }).nodes();
      var last = null;
      api.column(0, { page: 'current' }).data().each(function(group, i) {
        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><td colspan="5"><div class="row"><div class="col-lg-6" style="text-align:left">' + group + '</div><div class="col-lg-6" style="text-align:right"><button class="datatableGroupingBtn btn btn-default btn-xs fa fa-remove" value='+group+'></button></div></div></td></tr>'
          );
          last = group;
        }
      });
      // jQuery button click event
      $(".datatableGroupingBtn").on('click',(value)=>{
        var clickedRow = value.currentTarget.value;
      });
    },
    //Grouping By Row Logic Ends
    rowCallback: (row: Node, data: any | Object, index: number) => {
      $('a', row).bind('click', () => {
        this.service.closePosition(data.id).catch(this.handleError).subscribe(
          res => {
            if (res.status == 200) {
              //TODO Re-implement this using web-socket
              if ($.fn.DataTable.isDataTable(this.service.openPositionTableAlias)) {
                const table = $(this.service.openPositionTableAlias).DataTable();
                if (this.openPositionsData.length > 1) {
                  $('td', row)
                    .parents('tr')
                    .remove();
                } else {
                  table.clear().draw();
                }
                this.notifiicationAlert('Position Closed Successfully', 'SUCCESS');
              }
            }
          },
          (error: Response) => {
            this.notifiicationAlert('Some Problem While Closing The Position', 'WARNING');
          }
        );
      });
      return row;
    }
  };

现在我的要求是，我必须访问类级别

这个

，它是

#datatableGroupingBtn

的jquery click事件绑定中的OrderComponent类对象。我知道，如果我在

drawCallback

上使用arrow函数，这是可以做到的，但是如果我使用了其他必需的功能，那么这些功能将不起作用，因为您可以看到，我使用

function（）

在

drawCallback

函数中设置了一些属性

我的组件

import { NotificationService } from './../shared/utils/notification.service';
import { Global } from 'app/shared/global';
import { endponitConfig } from 'environments/endpoints';
import { Observable } from 'rxjs';
import { Http } from '@angular/http';
import { OrderService } from './order.service';
import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';

declare var $: any;

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent {

  openPositionsData: any;
  openOrdersData: any;

  openPositionDatatableOptions = {
    sDom: 'rt<"bottom"p>',
    ajax: (data, callback, settings) => {
      this.service.getOpenPositions()
        .map(data => data.json().data).catch(this.handleError)
        .subscribe(jsondata => {
          this.openPositionsData = jsondata;
          jsondata.forEach(element => {
            if (element.side === 'SLD') {
              element.openQuantity = '-' + element.openQuantity;
            }
            element['delta'] = 0;
            element['pl'] = 0;
          });
          if (jsondata) {
            callback({
              aaData: jsondata
            });
          }
        },
        error => {
          this.notifiicationAlert('Some Error Occured While Retrieving Positions Data', 'WARNING');
        });
    },

    columns: [
      { data: 'account.brokerId' },
      { data: 'contract.localSymbol' },
      { data: 'openQuantity' },
      { data: 'delta' },
      { data: 'pl' },
      {
        data: null,
        orderable: false,
        defaultContent:
          '<a class="fa fa-remove" style="color:#8B0000"></a>',
        responsivePriority: 2
      }
    ],
    //Grouping By Row Logic
    "columnDefs": [
      { "visible": false, "targets": 0 }
    ],
    "order": [[0, 'asc']],
    "drawCallback": function (settings) {
      var api = this.api();
      var rows = api.rows({ page: 'current' }).nodes();
      var last = null;
      api.column(0, { page: 'current' }).data().each(function(group, i) {
        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><td colspan="5"><div class="row"><div class="col-lg-6" style="text-align:left">' + group + '</div><div class="col-lg-6" style="text-align:right"><button class="datatableGroupingBtn btn btn-default btn-xs fa fa-remove" value='+group+'></button></div></div></td></tr>'
          );
          last = group;
        }
      });
      // jQuery button click event
      $(".datatableGroupingBtn").on('click',(value)=>{
        var clickedRow = value.currentTarget.value;
      });
    },
    //Grouping By Row Logic Ends
    rowCallback: (row: Node, data: any | Object, index: number) => {
      $('a', row).bind('click', () => {
        this.service.closePosition(data.id).catch(this.handleError).subscribe(
          res => {
            if (res.status == 200) {
              //TODO Re-implement this using web-socket
              if ($.fn.DataTable.isDataTable(this.service.openPositionTableAlias)) {
                const table = $(this.service.openPositionTableAlias).DataTable();
                if (this.openPositionsData.length > 1) {
                  $('td', row)
                    .parents('tr')
                    .remove();
                } else {
                  table.clear().draw();
                }
                this.notifiicationAlert('Position Closed Successfully', 'SUCCESS');
              }
            }
          },
          (error: Response) => {
            this.notifiicationAlert('Some Problem While Closing The Position', 'WARNING');
          }
        );
      });
      return row;
    }
  };

  constructor(private http : Http, private service : OrderService){
     this.http.get(Global.serviceUrl).subscribe(response=>{
        this.openPositionsData = response.json().data;
     })
  }

}

从'/../shared/utils/notification.service'导入{NotificationService}；
从“app/shared/Global”导入{Global}；
从“环境/端点”导入{endponitConfig}；
从“rxjs”导入{Observable}；
从'@angular/Http'导入{Http}；
从“/order.service”导入{OrderService}；
从“@angular/core”导入{Component，OnInit，OnDestroy，AfterViewInit}；
从'@angular/Router'导入{Router}；
声明var$：任何；
@组成部分({
选择器：“应用程序顺序”，
templateUrl:“./order.component.html”，
样式URL:['./order.component.css']
})
导出类OrderComponent{
openPositionsData：任何；
openOrdersData：任何；
openPositionDatatableOptions={
sDom:'rt'，
ajax：（数据、回调、设置）=>{
this.service.getOpenPositions（）
.map（data=>data.json（）.data）.catch（this.handleError）
.subscribe（jsondata=>{
this.openPositionsData=jsondata；
forEach（元素=>{
如果（element.side=='SLD'）{
element.openQuantity='-'+element.openQuantity；
}
元素['delta']=0；
元素['pl']=0；
});
if（jsondata）{
回拨({
aaData:jsondata
});
}
},
错误=>{
此.NotificationAlert（'检索职位数据时发生错误'，'警告'）；
});
},
栏目：[
{data:'account.brokerId'}，
{data:'contract.localSymbol'}，
{data:'openQuantity'}，
{数据：'delta'}，
{data:'pl'}，
{
数据：空，
可订购：错误，
默认内容：
'',
响应优先级：2
}
],
//按行逻辑分组
“columnDefs”：[
{“可见”：false，“目标”：0}
],
“订单”：[[0，'asc']]，
“drawCallback”：函数（设置）{
var api=this.api（）；
var rows=api.rows（{page:'current'}）.nodes（）；
var last=null；
列（0，{page:'current'}）.data（）.each（函数（组，i）{
如果（最后！==组）{
$（行）.eq（i）.之前(
''+组+''
);
last=组；
}
});
//jQuery按钮单击事件
$（“.datatableGroupingBtn”）。在（'单击'，（值）=>{
var clickedRow=value.currentTarget.value；
});
},
//按行逻辑结束分组
rowCallback：（行：节点，数据：任意|对象，索引：编号）=>{
$（'a'，row）.bind（'click'，（）=>{
this.service.closePosition（data.id）.catch（this.handleError）.subscribe(
res=>{
如果（res.status==200）{
//TODO使用web套接字重新实现此功能
if（$.fn.DataTable.isDataTable（this.service.openPositionTableAlias））{
const table=$（this.service.openPositionTableAlias.DataTable（）；
如果（this.openPositionsData.length>1）{
$（'td'，世界其他地区）
.父母（tr）
.remove（）；
}否则{
table.clear（）.draw（）；
}
此通知警报（“头寸成功关闭”、“成功”）；
}
}
},
（错误：响应）=>{
此通知警报（“关闭头寸时出现问题”，“警告”）；
}
);
});
返回行；
}
};
构造函数（私有http:http，私有服务：OrderService）{
this.http.get（Global.serviceUrl）.subscribe（response=>{
this.openPositionsData=response.json（）.data；
})
}
}

在jQuery事件绑定的方法中，声明如下所示的变量

let self = this;

---

现在，在声明了

self

变量后，您应该能够在jquery click事件绑定中使用此变量，在构造函数中分配

openPositionDatatableOptions

openPositionDatatableOptions : any;

constructor()
{
    const self = this;

    this.openPositionDatatableOptions = {

    //....

    "drawCallback": function (settings) {
  //....
  // jQuery button click event
  $(".datatableGroupingBtn").on('click',(value)=>{
    var clickedRow = value.currentTarget.value;
    console.log(self);//<=== self is your class instance
  });
},


}

openPositionDatatableOptions:any；
构造函数（）
{
const self=这个；
this.openPositionDatatableOptions={
//....
“drawCallback”：函数（设置）{
//....
//jQuery按钮单击事件
$（“.datatableGroupingBtn”）。在（'单击'，（值）=>{
var clickedRow=value.currentTarget.value；
console.log（self）；//您可以将
this
放在事件绑定之外的变量中。类似于
var self=this
的东西。但是如果您使用
Angular
我认为您不需要像click这样的
jQuery
事件绑定。如果我在
drawCallback
函数中使用
var self=this
，那么它将给我这个函数级别在类内的
self
变量中，我们不能声明let和const之类的变量。它可以在方法或函数内声明。@Yash Jain，是的。对此很抱歉。在构造函数内初始化datatable选项是一种好方法吗？我在类中初始化datatable，并将其分配给co中的table标记组件的模板。这就是问题的原因。我不明白为什么在这种情况下会不好。
openPositionDatatableOptions : any;

constructor()
{
    const self = this;

    this.openPositionDatatableOptions = {

    //....

    "drawCallback": function (settings) {
  //....
  // jQuery button click event
  $(".datatableGroupingBtn").on('click',(value)=>{
    var clickedRow = value.currentTarget.value;
    console.log(self);//<=== self is your class instance
  });
},


}