2017-10-12 124 views
0

類變量名稱:addPointY如何在函數()方法中使用類變量?

「addPointY」 使用功能:

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

我必須找到一種方式來使用它。 這是客戶的要求,尚未解決。 請以另一種方式告訴我。

必須在其任何方法中使用類變量。 但我無法獲得類變量。

難道你沒有一個聰明的開發者解決了同樣的問題嗎?


@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; 
} 

} 

回答

1

this內,因爲當你使用function() {}語法是基於它是如何被調用創建this自己的綁定爲setInterval回調函數不指向當前的類實例。

爲了解決這個問題使用arrow functions它保留了背景下,您可以訪問回調內部類屬性:

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); 
} 

就可以解決這個問題的另一種方法是,你捕捉使用that模式,將this它指向您的類實例,並在需要引用您的實例的任何地方使用它:

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); 
       } 
      } 
     } 
     // ... 
    }); 
} 
相關問題