angular - 类型错误 : [X] is not a function

Question

我使用 angular4 和 dc.js 来创建向下钻取图表。

下面是我的代码:

import { Component, ViewChild } from '@angular/core';
import { OnInit, AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { DataSource } from '@angular/cdk/collections';

import * as dc from 'dc';
import * as d3 from 'd3';
import * as crossfilter from 'crossfilter2';

import { LoaderService } from '../../services/loader.service';
import { CitsChartService } from './../../services/citsChart.service';

@Component({
  selector: 'app-cits-chart',
  templateUrl: './cits-chart.component.html',
  styleUrls: ['./cits-chart.component.css']
})

export class CitsChartComponent implements OnInit, AfterViewInit {
  isShowProgressbar = false;
  ticketData;
  localTktData;
  tktAssignedToBarChart;
  tktDataTable;
  pageStartRow = 0;
  ndx;
  all;

  constructor(private _loaderSrvc: LoaderService,
    private _citsChartService: CitsChartService) { }

  ngOnInit() {

  }

  ngAfterViewInit() {

    this._citsChartService.getCITSData().subscribe(data => {
      this.ticketData = data;
      this.drawChart();
      this._loaderSrvc.display(false);
    });
  }

  public redrawAll() {
    dc.redrawAll();
  }

  drawChart() {

    this.tktAssignedToBarChart = dc.barChart('#tktAssignedToBarChart');
    this.tktDataTable = dc.dataTable('#tktTable');
    let assignedtoDim, assignedToGroup, tktTableDim;

    this.ndx = crossfilter(this.ticketData);

    this.all = this.ndx.groupAll();

    assignedtoDim = this.ndx.dimension(function (d) {
      return (d.handlerUsername ? d.handlerUsername : 'None');
    }),
      assignedToGroup = assignedtoDim.group().reduceCount();

    this.tktAssignedToBarChart
      .width(assignedtoDim.group().all().length * 50)
      .height(260)
      .dimension(assignedtoDim)
      .group(this.remove_empty_bins(assignedToGroup))
      .x(d3.scale.ordinal())
      .xUnits(dc.units.ordinal)
      .brushOn(false)
      .xAxisLabel('Assigned To')
      .yAxisLabel('No. of Tickets')
      .gap(5)
      .elasticY(true)
      .elasticX(true)
      .barPadding(0.2)
      .outerPadding(0.5)
      .controlsUseVisibility(true)
      .on('renderlet', function (d) {
        d.selectAll('g.x text').attr('dx', '-10').attr(
          'dy', '0').attr('transform', 'rotate(-55)').attr('style', 'text-anchor:end');
        d.selectAll('svg').attr('height', '300');
        d.selectAll('g .x-axis-label').attr('transform', 'translate(476,293)');
      })
      .on('filtered', function () {
        this.updateTable('reset');
      })
      ;

    tktTableDim = this.ndx.dimension(function (d) {
      return [d.issueId];
    });

    this.tktDataTable
      .dimension(tktTableDim)
      .group(function (d) {
        return '';
      })
      .columns([
        function (d) {
          return d.projectName;
        },
        function (d) {
          return d.issueId;
        },
        function (d) {
          return d.summary;
        },
        function (d) {
          return d.status;
        },
        function (d) {
          return d.reporterUsername;
        },
        function (d) {
          return d.handlerUsername;
        },
        function (d) {
          return d.severity;
        },
        function (d) {
          return d.dateSubmitted;
        }
      ])
      .sortBy(function (d) {
        return d.issueId;
      })
      .order(d3.ascending)
      .size(Infinity)
      .on('renderlet', function (table) {
        table.selectAll('.dc-table-group').classed('visible-print-inline', true);
      });

    this.updateTable('reset');

    dc.renderAll();
  }

  remove_empty_bins(source_group) {
    return {
      all: function () {
        return source_group.all().filter(function (d) {
          return d.value !== 0;
        });
      }
    };
  }

  updateTable(operation) {

    if (operation === 'Next') {
      this.pageStartRow += 10;
    } else if (operation === 'Previous') {
      this.pageStartRow -= 10;
    } else {
      this.pageStartRow = 0;
    }

    d3.select('#previous').attr('disabled', this.pageStartRow === 0 ? 'true' : null);
    d3.select('#next').attr('disabled', (this.pageStartRow + 10) >= this.all.value() ? 'true' : null);

    d3.select('#recStart').text(this.pageStartRow + 1);
    d3.select('#recEnd').text((this.pageStartRow + 10) >= this.all.value() ?
      this.all.value() : this.pageStartRow + 10);

    this.tktDataTable.beginSlice(this.pageStartRow);
    this.tktDataTable.endSlice(this.pageStartRow + 10);

    this.tktDataTable.redraw();
  }
}

当我尝试申请.on('filtered', function () {})时它给了我一个错误，如下所示。

ERROR 
TypeError: this.updateTable is not a function
Stack trace:
CitsChartComponent.prototype.drawChart/<@webpack-internal:///../../../../../src/app/components/cits-chart/cits-chart.component.ts:137:13
event@webpack-internal:///../../../../d3/d3.js:504:40
_dc/dc.baseMixin/_chart._invokeFilteredListener@webpack-internal:///../../../../dc/dc.js:1818:13
_dc/dc.baseMixin/_chart.filter@webpack-internal:///../../../../dc/dc.js:2104:9
_dc/dc.coordinateGridMixin/<@webpack-internal:///../../../../dc/dc.js:3728:9
_dc/dc.baseMixin/_chart.onClick/<@webpack-internal:///../../../../dc/dc.js:2154:13
_dc/dc.events.trigger@webpack-internal:///../../../../dc/dc.js:860:9
_dc/dc.baseMixin/_chart.onClick@webpack-internal:///../../../../dc/dc.js:2153:9
_dc/dc.barChart/<@webpack-internal:///../../../../dc/dc.js:5780:9
d3_selection_onListener/<@webpack-internal:///../../../../d3/d3.js:1120:9
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4941:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9
globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17

有问题的代码是

this.tktAssignedToBarChart
      .width(assignedtoDim.group().all().length * 50)
      |
      |
      |
      |
      |
      .on('filtered', function () {
        this.updateTable('reset');
      })
      ;

Answer 1

您需要将回调从 function(foo) {} 更改为 (foo) => {}。

粗箭头将通过上下文(this)解决 Typescript 中的问题。

有关更多信息，您可以阅读 here .