Question

我有一个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的引用，除非对图表框架进行修改？

Answer 1

您应该使用箭头功能

如果您这样做

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

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

它将使用正确的代码并起作用。

我建议您阅读一些有关箭头功能https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

的内容

在Typescript原始函数中访问“ this”

1 个答案: