从JavaScript调用Angular 7方法

Question

我正在使用DevExtreme PivotGrid的Angular版本。 这是我的代码

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() {
  }

}

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

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

有什么办法可以做到吗？

Answer 1

这个问题是不是普通的JavaScript，但范围this在JavaScript中。

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

onPivotCellClick(e) {
  const that = this;
  ...
  textBox.onkeypress = function (event) {
    ...
    that.setDataSource(oData);
    ...

或者，您可以使用箭头功能按预期使用this关键字。

onPivotCellClick(e) {
  textBox.onkeypress = (event) => {
    ...
    this.setDataSource(oData);
    ...