Как получить доступ к переменной вне области действия функции Angular 9

Question

Я изучаю angular и пытаюсь получить доступ к значению переменной за пределами области видимости. Я пытался использовать this. Это не сработало, помогите мне

export class DashboardComponent   {
  private population: number;
  private country: string;
  constructor(private dummyService: DummyService) {
    this.myData();
  }

  myData(){
     this.dummyService.getList().subscribe((data) => {
      this.response = data;
        this.population = this.response.map(data => data.population);
        this.country = this.response.map(data => data.country);
        //able to console it here

    });
    //not able to console it here
  }

     chart1 = {
      data: {
        labels: this.country,// want to access it here
        datasets: [{
          label: 'population',
          data: this.population, // want to access it here
          backgroundColor: 'transparent',
          borderColor: '#5b6582',
          borderWidth: 2
        },
        ]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              fontColor: 'rgba(0,0,0,.6)',
              fontStyle: 'bold',
              beginAtZero: true,
              maxTicksLimit: 8,
              padding: 10
            }
          }]
        },
        responsive: true,
        legend: {
          position: 'bottom',
          display: false
        },
      }
    };

ngOnInit() {

    new Chart('chart-line', {
      type: 'line',
      data: this.chart1.data,
      options: this.chart1.options
    });
  }

Answer 1

Вам следует создать переменную chart1, создать initChart() и вызвать ее до получения метода get data.

 export class DashboardComponent   {
      private population: number;
      private country: string;
      chart1 : any;
      constructor(private dummyService: DummyService) {

        this.myData();
      }

      myData(){
         this.dummyService.getList().subscribe((data) => {
          this.response = data;
            this.population = this.response.map(data => data.population);
            this.country = this.response.map(data => data.country);
            //able to console it here
            this.initChart();
        });
        //not able to console it here
      }

      initChart(){
        let seft = this;
         chart1 = {
          data: {
            labels: self.country,// want to access it here
            datasets: [{
              label: 'population',
              data: self.population, // want to access it here
              backgroundColor: 'transparent',
              borderColor: '#5b6582',
              borderWidth: 2
            },
            ]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  fontColor: 'rgba(0,0,0,.6)',
                  fontStyle: 'bold',
                  beginAtZero: true,
                  maxTicksLimit: 8,
                  padding: 10
                }
              }]
            },
            responsive: true,
            legend: {
              position: 'bottom',
              display: false
            },
          }
        };
     }

ngOnInit() {

    new Chart('chart-line', {
      type: 'line',
      data: this.chart1.data,
      options: this.chart1.options
    });
  }