从JavaScript调用Angular 7方法

我使用的是DevExtreme PivotGrid的角度版本。这是我的密码

import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
import { Service, Sale } from './pivotgrid.service';

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import { DxPivotGridComponent } from 'devextreme-angular';
@Component({
  selector: 'app-pivotgridsample',
  templateUrl: './pivotgridsample.component.html',
  styleUrls: ['./pivotgridsample.component.scss'],
  providers: [Service]
})

export class PivotgridsampleComponent implements OnInit {
  pivotGridDataSource: any;
  drillDownDataSource: any;
  originalData: Sale[];

  @ViewChild("sales", { static: true }) salesPivotGrid: DxPivotGridComponent;

  constructor(private service: Service) {
    this.originalData = this.service.getSales();

    this.pivotGridDataSource = new PivotGridDataSource({
      fields: [{
        caption: "Region",
        width: 120,
        dataField: "region",
        area: "row"
      }, {
        caption: "City",
        dataField: "city",
        width: 150,
        area: "row"
      }, {
        dataField: "date",
        dataType: "date",
        area: "column"
      }, {
        groupName: "date",
        groupInterval: "year",
        expanded: true
      }, {
        groupName: "date",
        groupInterval: "month",
        visible: false
      }, {
        caption: "Total",
        dataField: "amount",
        dataType: "number",
        summaryType: "sum",
        format: "currency",
        area: "data"
      }, {
        caption: "Running Total",
        dataField: "amount",
        dataType: "number",
        summaryType: "sum",
        format: "currency",
        area: "data",
        runningTotal: "row",
        allowCrossGroupCalculation: true
      }],
      store: service.getSales()
    });
  }

  onPivotCellClick(e) {

    if (e.area == "data") {

      let cellValue = e.cell.value == null ? "" : e.cell.value;
      let cell = e.cellElement;

      this.drillDownDataSource = this.pivotGridDataSource.createDrillDownDataSource(e.cell);

      // Check if there is already input attched to cell
      if (cell.childNodes.length > 0) {

        // Clear Cell content
        cell.innerHTML = '';

        // Append Textbox
        cell.innerHTML = '<input type="text" class="editable" value="' + cellValue + '" style="width:100%;">'
        var textBox = cell.querySelector("input.editable");
        textBox.focus();

        this.drillDownDataSource.load();
        let groupData = this.drillDownDataSource._items;
        let oData = this.originalData;
        let pivotTable = this.salesPivotGrid.instance;


        textBox.onkeypress = function (event) {
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (keycode == '13') {
            var newValue = textBox.value;
            cell.innerHTML = "<span>" + parseInt(newValue) + "</span>";
            textBox.remove();

            console.log(oData);

            for (var i = 0; i < oData.length; i++) {
              for (var j = 0; j < groupData.length; j++) {
                if (oData[i].id == groupData[j].id) {
                  oData[i].amount = newValue / groupData.length;
                  //console.log(drillDownDataSource._items[i].amount);
                }
              }
            }

            this.setDataSource(oData)
            //pivotTable.option("store", oData);
            //pivotTable.dataSource.store = oData;
          }
          return true;
        }
      }
    }
  }

  setDataSource(data:any){
    alert('can be called');
  }

  ngOnInit() {
  }

}

从'@angular/core'导入{Component，OnInit，ViewChild，HostListener}；
从“./pivotgrid.Service”导入{Service，Sale}；
从“devextreme/ui/pivot_grid/data_source”导入PivotGridDataSource；
从“devextreme angular”导入{DxPivotGridComponent}；
@组成部分({
选择器：“应用程序pivotgridsample”，
templateUrl:“./pivotgridsample.component.html”，
styleUrls:['./pivotgridsample.component.scss']，
提供者：[服务]
})
导出类PivotgridsampleComponent实现OnInit{
pivotGridDataSource：任何；
drillDownDataSource：任何；
原始数据：销售[]；
@ViewChild（“sales”，{static:true}）salesPivotGrid:DxPivotGridComponent；
构造函数（专用服务：服务）{
this.originalData=this.service.getSales（）；
this.pivotGridDataSource=新的pivotGridDataSource({
字段：[{
标题：“区域”，
宽度：120，
数据字段：“区域”，
区域：“行”
}, {
描述：“城市”，
数据字段：“城市”，
宽度：150，
区域：“行”
}, {
数据字段：“日期”，
数据类型：“日期”，
区域：“列”
}, {
组名：“日期”，
分组间隔：“年”，
是的
}, {
组名：“日期”，
分组间隔：“月”，
可见：假
}, {
标题：“总计”，
数据字段：“金额”，
数据类型：“数字”，
summaryType:“sum”，
格式：“货币”，
领域：“数据”
}, {
标题：“运行总数”，
数据字段：“金额”，
数据类型：“数字”，
summaryType:“sum”，
格式：“货币”，
领域：“数据”，
runningTotal:“行”，
allowCrossGroupCalculation:true
}],
商店：service.getSales（）
});
}
点击（e）{
如果（如面积=“数据”）{
让cellValue=e.cell.value==null？”“：e.cell.value；
设cell=e.cellElement；
this.drillDownDataSource=this.pivotGridDataSource.createDrillDownDataSource（e.cell）；
//检查是否有已连接到单元格的输入
如果（cell.childNodes.length>0）{
//透明细胞含量
cell.innerHTML=''；
//附加文本框
cell.innerHTML=“”
var textBox=cell.querySelector（“input.editable”）；
textBox.focus（）；
this.drillDownDataSource.load（）；
让groupData=this.drillDownDataSource.\u项；
设oData=this.originalData；
让数据透视表=this.salesportogrid.instance；
textBox.onkeypress=函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
如果（键代码=='13'）{
var newValue=textBox.value；
cell.innerHTML=“+parseInt（newValue）+”；
textBox.remove（）；
控制台日志（oData）；
对于（变量i=0；i

在这里，我使用PivotGrid的onPivotCellClick来处理我的自定义需求。基本上，我将输入附加到网格单元格以进行内联编辑，还将按键事件附加到网格单元格

因为它是用普通JavaScript编写的，所以我无法从用JavaScript编写的输入按键回调函数调用Angular方法（即，setDataSource）

---

有什么方法可以做到这一点吗？

这个问题不是关于普通的JavaScript，而是JavaScript中的

这个
的范围

声明一个引用此
的变量，并在回调函数内调用组件的方法时使用该变量

onPivotCell单击（e）{
常数=this；
...
textBox.onkeypress=函数（事件）{
...
setDataSource（oData）；
...

或者，您可以使用箭头功能按您的意愿使用
此
关键字

onPivotCell单击（e）{
textBox.onkeypress=（事件）=>{
...
这个.setDataSource（oData）；
...