在函数中获取主类对象而不使用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;
    }
  };

在我的datatable选项中,我有一个 drawCallback 函数内部我正在对行进行分组。在函数内部,我还有一个 jquery 单击事件结束 #datatableGroupingBtn

"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;
      });
    }

现在我的要求是,我必须进入班级级别 this 这是的jquery click事件绑定中的OrderComponent类对象 . 我知道,这可以做到,如果我使用箭头函数在 抽回 但是,如果我使用了其他必需的功能,那么它们将无法工作,因为您可以看到我使用了一些属性 function() 把这个放进去 抽回

我的组件

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;
     })
  }

}