以角度更改 Highcharts 选择事件中的变量值答案

【问题标题】：Changing value of variable in Highcharts selection event in angular以角度更改 Highcharts 选择事件中的变量值
【发布时间】：2020-04-29 20:54:04
【问题描述】：

首先是使用 Highcharts API 在 Angular 7+ 中提取的代码：

export class TestComponent implements OnInit{
    seek: boolean = false;
    exampleChart;
    public options = {
        chart:{
            zoomType: 'x',
            events: {
                selection: function(event){
                    this.seek = true;
                    console.log(this.seek); // outputs to true
                }
            }
        },
        xAxis:{
            type:'datetime'
        }
        series:{
            // given relevant datetime values
        }
    };

    constructor(){}
    ngOnInit{
        this.exampleChart = this.options;
    }

    onClick(){
        console.log(this.seek); // outputs false
    }

}

场景：首先我选择图表中的特定部分，然后单击按钮

由于 zoomtype 位于 x 轴，我可以放大/缩小和 选择事件使用正确的事件值触发。但是，我也在将该事件中的 seek 值更改为 true。此更改不会反映到原始 seek 上，因为在按下按钮并调用 onClick() 函数时，控制台中的 seek 值输出为 false。我不知道为什么会这样以及如何获得正确的值。

【问题讨论】：

这可能是上下文错误的原因。你试过箭头功能吗？ selection: (event) => { this.seek = true; }
谢谢你。您的解决方案有效。但是你是怎么想到的，我使用的是什么语法，AngularJS 的？
这是关于 js 中函数的一个奇怪部分，因为它们有自己的 this 上下文。箭头函数没有。问候
好的，谢谢。会记住这一点。
然而，我想知道一件事，因为普通函数有自己的上下文，这是否意味着普通函数内部的 this in( this.seek ) 是自己定义的，并且变量之外只是将分配给它的任何值带出该范围？我的意思是，为什么它在普通函数中被赋值为真值，以后赋值也没用？

标签： angular highcharts

【解决方案1】：

@sagat 建议的正确答案：

public options = {
        chart:{
            zoomType: 'x',
            events: {
                selection: (event)=> {
                    this.seek = true;
                    console.log(this.seek); // outputs to true
                }
            }
        },
        xAxis:{
            type:'datetime'
        }
        series:{
            // given relevant datetime values
        }
    };


constructor(){}
    ngOnInit{
        this.exampleChart = this.options;
    }

    onClick(){
        console.log(this.seek); // outputs true
    }

谢谢。

【讨论】：