Question

我已经搜索并解决了这个问题一段时间，但我不确定问题是什么。不确定它是否有角度或c3。

出于某种原因，我无法在同一组件中的c3.generate函数中调用我的方法。

从模板中调用c3图表，它完美无缺。我已经使用模板中的按钮测试了我的somethingMethod（）并且它可以正常工作。

我希望能够使用c3 onclick函数调用somethingMethod（），但它无法正常工作。它甚至不会加载this.someTypeTitle ='asda'; 但警报有效，所以我认为我超出了范围，但不确定如何解决它。

@Component({
    selector: 'something',
    templateUrl: 'something.component.html',

})
export class SomethingComponent{

    someTypeTitle: string;

    getData(input: string): Array<number>{
        return data;
    }

    somethingMethod(input: string){
        someTypeTitle = input;
    }

    getChart() {
        var chart = c3.generate({
            bindto: '#stackedbar',

            data: {
                x: 'x',
                columns: [
                   this.getData(someString),
                   this.getData(someString) //These work
                ],

                onclick: function (d, e) {
                   alert(this.internal.config.axis_x_categories[d.x]); // This works
                   this.someTypeTitle="asdad"; //This doesn't work.
                   this.someTypeTitle=  this.internal.config.axis_x_categories[d.x]; //This doesn't work.
                   this.somethingMethod(this.internal.config.axis_x_categories[d.x]); //This doesn't work.

                },
}...

Answer 1

事实上，这个问题与Angular 2或C3 本身无关，这是在ECMAScript中更改this的一个警告。

问题是this函数内的onclick未指向您的类实例。由于函数传递给C3， C3在不同的上下文中调用它。因此，this函数内的onclick指的是元素而不是类实例。这是事件回调的典型行为。

为了防止这种情况，您应该使用箭头功能，词汇。这意味着箭头函数内部的this保持不变，无论它在何种上下文中被调用。

使用箭头功能：

onclick: (d, e) => {
    this.someTypeTitle = "asdad";
    this.someTypeTitle = this.internal.config.axis_x_categories[d.x];
    this.somethingMethod(this.internal.config.axis_x_categories[d.x]);
}

您可以阅读有关arrow functions on MDN的更多信息。

Answer 2

呃，因为没有人回答我的问题，我自己想出来了。我必须先声明一个变量，var that = this;并使用that.somethingMethod（）;

引用我想要的函数

显然，onclick中的这个是指c3 / d3元素。

C3 js .. Angular 2 Typescript在c3.generate中调用外部函数？

2 个答案: