0

我有一个 Angular 6 应用程序，它使用出色的ngx-charts框架来显示图表。这个图表组件让我可以指定一个工具提示格式化函数，如下所示：

<ngx-charts-bar-vertical [xAxisTickFormatting]="dateTickFormatting" >
</ngx-charts-bar-vertical>

然后在父组件类中定义格式化函数：

  dateTickFormatting(val: string): string {
    return val.toUpperCase();
  }

当我尝试从此格式化程序函数访问父组件类中的值时，会出现我的问题：

  public testVar: string = 'This is a test variable';

  dateTickFormatting(val: string): string {
    console.log(this.testVar);
    return val.toUpperCase();
  }

在这种情况下，testVar将是未定义的。

我知道“this”引用丢失了，因为ngx-charts它被引用dateTickFormatting为“原始”函数。有没有办法保留对父类的引用this，除非对图表框架进行修改？

4

1 回答 1

1

你应该使用箭头函数

如果你这样做

  public testVar: string = 'This is a test variable';

  dateTickFormatting = (val: string): string => {
    console.log(this.testVar);
    return val.toUpperCase();
  }

它将使用正确的 this 并工作。

我建议阅读一些关于箭头函数的内容https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

于 2018-08-20T13:52:12.387 回答