从 JavaScript 调用 Angular 7 方法

Question

我正在使用 Angular 版本的 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() {
  }

}

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

因为，这是简单的 JavaScript 我无法从我的输入按键回调函数调用 Angular 方法（即 setDataSource）写在 JavaScript.

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

Answer 1

此问题与普通 JavaScript 无关，而是 JavaScript 中 this 的范围。

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

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

或者您可以使用箭头函数按您的意愿使用 this 关键字。

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

从 JavaScript 调用 Angular 7 方法

Calling Angular 7 method from JavaScript

javascript

angular

devextreme-angular