How do I use a class variable in the function() method?

Question

Class Variable Name: addPointY

"addPointY" Using Function:

setInterval(function () {
    var y = Math.round(Math.random() * 100);
    series.addPoint(this.addPointY, true, true);
}, 3000);

---

I have to find a way to use it. This is a customer requirement and has not been resolved. Please tell me another way.

The class variable must be used in any of its methods. But I could not get the class variable.

Do not you have a smart developer who solved the same problem?

---

@Injectable()
export class HighChartService implements ChartService {
private addPointY: number = 0;

shiftAddPoint(data: number) {
    this.addPointY = data;
    console.log(this.addPointY);
}

/**
* @see DynamicChart start function
* @param obj chart Object
* @param title Top Title
* @param type ChartType
* @param yAxisTitle Left Title
* @param series Chart data
* @author jskang
* @since  2017/10/12
*/
dynamicInitOptions(title: string, type: string, yAxisTitle: string, series: Object[]) {
    if (!type) { type = "line"; }
    let obj = new Chart({
        chart: {
            type: type,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var y = Math.round(Math.random() * 100);
                        series.addPoint(this.addPointY, true, true);
                    }, 3000);
                }
            }
        },
        title: { text: title },
        xAxis: {
            categories: [0,1,2,3,4,5,6],
            labels: {
                formatter: function () {
                    let xAxis = "";
                    if(this.value % 7 == 0){ xAxis = "일"; }
                    else if(this.value % 7 == 1){ xAxis = "월"; }
                    else if(this.value % 7 == 2){ xAxis = "화"; }
                    else if(this.value % 7 == 3){ xAxis = "수"; }
                    else if(this.value % 7 == 4){ xAxis = "목"; }
                    else if(this.value % 7 == 5){ xAxis = "금"; }
                    else if(this.value % 7 == 6){ xAxis = "토"; }
                    return xAxis;
                }
            }
        },
        yAxis: {
            title: {
                text: yAxisTitle
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        series: series
    });
    return obj;
}

}

Answer 1

The this inside your callback function for setInterval does not point to the current class instance because when you use function () {} syntax it creates its own binding for this based on how it is called.

To fix this use arrow functions which preserves the context and you can access your class properties inside the callback:

load: () => { // Notice arrow function here
    // set up the updating of the chart each second
    var series = this.series[0];
    setInterval(() => { // Notice arrow function here
        var y = Math.round(Math.random() * 100);
        series.addPoint(this.addPointY, true, true);
    }, 3000);
}

---

Another way you can solve this is by using the that pattern where you capture your this where it points to your class instance and use it wherever you need to refer to your instance:

dynamicInitOptions(title: string, type: string, yAxisTitle: string, series: Object[]) {
    if (!type) { type = "line"; }
    let that = this; // Capture `this` here
    let obj = new Chart({
        chart: {
            type: type,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var y = Math.round(Math.random() * 100);
                        series.addPoint(that.addPointY, true, true); // Use `that` instead of `this here
                    }, 3000);
                }
            }
        }
        // ...
    });
}