Question

我正在尝试使用Google图表创建一个简单的抽象，我创建了一个图表服务，它将用作抽象。该模块提供选项和数据源，其余部分由服务负责（数据由REST API提供）。

这是当前代码，仅适用于一种情况：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any) {
    this.overviewService.getOverviewAggBarData().pipe(first()).subscribe(comboRequest => {
      for (const index of Object.keys(comboRequest.comboData)) {
        comboRequest.comboData[index].unshift(comboBarLabels[index]);
      }
      const data_array = [comboBarTypes, comboRequest.comboData[0],
        comboRequest.comboData[1], comboRequest.comboData[2]];
      google.charts.load('current', {'packages': ['corechart']});
      google.charts.setOnLoadCallback(() => {
        const data = ChartService.createDataTable(data_array);
        const chart = new google.visualization.ComboChart(element);
        chart.draw(data, options);
      });
    });
  }

我想要实现的是删除this.overviewService.getOverviewAggBarData()并将其替换为条件函数，在python中类似这样：

def foo(a, b):  # Adds two numbers
    return a + b
a = foo
print(a(1, 2))  # Prints 3

制作看起来像这样的东西：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: any) {
  if (source == "OverviewAggBar"){
    get_data = this.overviewService.getOverviewAggBarData;
  } else {
    get_data = this.overviewService.getOverviewPieData;
  }
  get_data().pipe(first()).subscribe(comboRequest => {
    for (const index of Object.keys(comboRequest.comboData)) {
      comboRequest.comboData[index].unshift(comboBarLabels[index]);
    }
    const data_array = [comboBarTypes, comboRequest.comboData[0],
      comboRequest.comboData[1], comboRequest.comboData[2]];
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(() => {
      const data = ChartService.createDataTable(data_array);
      const chart = new google.visualization.ComboChart(element);
      chart.draw(data, options);
    });
  });
}

之所以要这样做，是因为函数调用非常复杂，能够将这一部分抽象出来，为制作更通用的函数铺平了道路。我们非常欢迎实现同一目标的其他解决方案！

已解决，这是新代码：

createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: string) {
    let getData: any;
    if (source === 'getAggData') {
      getData = this.overviewService.getOverviewAggBarData.bind(this);
    } else {
      getData = this.overviewService.getOverviewPieData.bind(this);
    }
    getData().pipe(first()).subscribe(comboRequest => {
      const data_array = [comboBarTypes];
      for (const index of Object.keys(comboRequest.comboData)) {
        comboRequest.comboData[index].unshift(comboBarLabels[index]);
        data_array.push(comboRequest.comboData[index]);
      }
      google.charts.load('current', {'packages': ['corechart']});
      google.charts.setOnLoadCallback(() => {
        const data = ChartService.createDataTable(data_array);
        const chart = new google.visualization.ComboChart(element);
        chart.draw(data, options);
      });
    });
  }

Answer 1

如果我对您的理解正确，我认为您已经在这里了。 JavaScript（和TypeScript）允许相同的行为。您的代码中缺少的是声明get_data。我会使用三元运算符来做到这一点：

const get_data = source === “OverviewAggBar” ? this.overviewService.getOverviewAggBarData : this.overviewService.getOverviewPieData;

Answer 2

如果您将具有许多功能，则可以创建从源字符串到功能的“映射”。然后，您可以向地图添加更多功能。像这样：

class YourClass {
    private mapFromSourceToFunction: { [key: string]: () => Observable<YourComboResponseType> } = {
        'getAggData': () => this.overviewService.getOverviewAggBarData(),
        'getPipeData': () => this.overviewService.getOverviewPieData(),
        'getSomethingElse': () => this.overviewService.getSomethingElse()
    };

    createCombo(comboBarLabels: String[], comboBarTypes: String[], options: any, element: any, source: string) {
        let getData = this.mapFromSourceToFunction[source];

        // getData().pipe ...
    }
}

将打字稿功能另存为对象变量（Angular 6）

2 个答案: