对象在角度4中保持未定义

Question

我正在研究Angle 4项目，需要使用chart.js显示3个甜甜圈图

我能够显示图表，并在其中创建为模块化而编写的图表逻辑。

我的component.ts文件是

export class DashboardComponent implements OnInit {
  empChart: Chart;
  managerChart: Chart;
  hrChart: Chart;

  chartWidth = 100;
  numberOfChart = 0;



  constructor(private empLeavesChartService: EmployeeleaveschartService,
    private managerLeavesChartService: ManagerleaveschartserviceService,
    private hrLeavesChartService: HrleaveschartService) {}

  ngOnInit() {
    const currentEmpUserDetails = JSON.parse(sessionStorage.getItem('empUserDetails'));
    const currentEmpSysRole = currentEmpUserDetails.lmsSytsemRoles;

    if (currentEmpSysRole.indexOf("GetMyLeaves") == -1) {
      this.numberOfChart++;
      this.empChart = this.empLeavesChartService.loadEmployeeLeavesChart();
    }

    if (currentEmpSysRole.indexOf("GetMyLeaves") == -1) {
      this.numberOfChart++;
      this.managerChart = this.managerLeavesChartService.loadManagerLeavesChart();
    }

    if (currentEmpSysRole.indexOf("GetMyLeaves") == -1) {
      this.numberOfChart++;
      this.hrChart = this.hrLeavesChartService.loadHrLeavesChart();
    }

    this.chartWidth = this.chartWidth / this.numberOfChart;

  }

  getDetails(selectedChart) {
alert(this.empChart);
  }

其中empLeavesChartService.loadEmployeeLeavesChart（）负责通过调用rest服务来获取数据，根据数据创建图表对象并按如下所示返回它。

    this.employeeService.getLeaves('P').subscribe(result => {
      const pendingLeaves = result.length;

      this.employeeService.getLeaves('A').subscribe(result => {
        const approvedLeaves = result.length;

        this.employeeService.getLeaves('R').subscribe(result => {
          const rejectedLeaves = result.length;

          this.employeeService.getLeaves('C').subscribe(result => {
            const canceledLeaves = result.length;

            this.employeeService.getBalanceLeaves().subscribe(result => {
              const balanceLeaves = result;


              this.chart = new Chart('myLeavesCanvas', {
                type: 'doughnut',
                data: {
                  labels: ["Leaves Pending", "Leaves Approved", "Rejected Leaves", "Canceled Leaves", "Balance Leaves"],
                  datasets: [
                    {
                      label: ['P', 'A', 'R', 'C', 'B'],
                      data: [pendingLeaves, approvedLeaves, rejectedLeaves, canceledLeaves, balanceLeaves],
                      backgroundColor: [
                        '#33CCFF',
                        '#08526B',
                        '#687073',
                        '#203ECB',
                        '#D5D7E0'
                      ],
                      borderColor: [
                        '#33CCFF',
                        '#08526B',
                        '#687073',
                        '#203ECB',
                        '#D5D7E0',
                      ],

                      borderWidth: [1, 1, 1, 1, 1]
                    }
                  ]
                },
                options: this.options
              });
            });
          });
        });
      });

    });

    return this.chart;
  }

该图表完美地呈现在component.html上，现在我添加了一个onclick函数，需要访问该图表并获取选定的标签，但是当我尝试访问该图表时，它显示为未定义。

我的component.html是

<div id="canvasSec" >
   <div id="myLeavesDiv" class="details" [style.width.%]=chartWidth >
        <canvas id="myLeavesCanvas" (click)="getDetails('empChart')">{{empChart}}</canvas>
    </div>

我的getDetails函数是：

getDetails(selectedChart) {
alert(this.empChart);
  }

为什么在onclick函数中未定义图表对象？怎么了？