javascript - 无法读取未定义的 angular2 的属性

Question

当我想使用 angular2 组件的方法时遇到问题。这是代码:

import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {AgGridModule} from 'ag-grid-angular/main';
import {GridOptions, GridApi, ColumnApi} from "ag-grid";

import { AllService } from './all.service';
import { SomeClass } from './someClass';
import { ResponseData, Links } from './response';

import 'rxjs/Rx';

@Component({
  selector: 'all',
  styleUrls: ['./all.scss'],
  templateUrl: './all.html'
})

export class AllComponent implements OnInit {

embedded: Array<SomeClass>
page: number;
page_count: number;
link: Array<Links> = [];
total_items: number;
page_size: number;
private gridOptions: GridOptions = {
    enableFilter: true,
    enableSorting: true,
    //pagination: true,
    enableColResize: true,
    animateRows: true
};
private api: GridApi;
private columnApi: ColumnApi;
private json : JSON;
private test : String;
private n : number = 0;

constructor (private service: AllService, private router: Router) {

}

ngOnInit(){
    this.getData();
}

private myRowClickedHandler(event) {
    this.goToDetail(event.data.uuid);
}

private getData(){
  this.service.getInitData().subscribe(data => {  this.embedded = data._embedded.some_class;
                                                    this.page = data.page;
                                                    this.page_count = data.page_count;
                                                    this.page_size = data.page_size;
                                                    this.total_items = data.total_items;
                                                    this.link[0] = data._links;
                                                    this.createGrid();

                                                    this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler);
                                                });
}

private createGrid(){
    this.n = this.embedded.length;
    this.gridOptions.columnApi.autoSizeColumns;
    this.gridOptions.api.setColumnDefs(this.createColumnDefs());
    this.gridOptions.api.setRowData(this.createRows());
    this.gridOptions.api.sizeColumnsToFit();
}

private createRows(){

    var rowData:any[] = [];

    var regexp1 = /[a-zA-Z0-9]*$/;

    for (var i = 0; i < this.n; i++) {

        rowData.push({
            uuid: this.embedded[i].uuid,
            state: this.embedded[i].state,
            executionDate: this.embedded[i].executionDate,
            startDate: this.embedded[i].startDate,
            endDate: this.embedded[i].endDate,
            taskClass: regexp1.exec(this.embedded[i].taskClass)[0],
            humanDuration: this.embedded[i].humanDuration,
            humanMemoryConsumption: this.embedded[i].humanMemoryConsumption,
        });
    }

    return rowData;

}

private createColumnDefs() {
    return [
      {headerName: 'uuid', field: 'uuid'},
      {headerName: 'state', field: 'state', filter: 'text', cellStyle: function(params) {
          switch(params.value){
              case "STATE1": return {color: 'orange'};
              case "STATE23": return {color: 'green'};
              case "STATE8": return {color: 'red'};
          }
      }},
      {headerName: 'executionDate', field: 'executionDate'},
      {headerName: 'startDate', field: 'startDate'},
      {headerName: 'endDate', field: 'endDate'},
      {headerName: 'taskClass', field: 'taskClass'},
      {headerName: 'humanDuration', field: 'humanDuration'},
      {headerName: 'humanMemoryConsumption', field: 'humanMemoryConsumption'},
      {headerName: 'action', field: 'action'}
    ]
}

public goToDetail(uuid: String) {
    let link = ['pages/all', uuid];
    this.router.navigate(link);
}
 }

这是我得到的错误:

EXCEPTION: Cannot read property 'goToDetail' of undefined

我真的不明白这里发生了什么......这是由于订阅方法的调用吗？

Answer 1

您是否尝试过使用 Function.prototype.bind() 方法，该方法允许您指定在触发回调时应用作 this 的值？

像这样:

this.gridOptions.api.addEventListener('rowClicked', this.myRowClickedHandler.bind(this), false);

如果您未指定应将哪个值用作 this，则处理程序中 this 的值是对该元素的引用(因此，未定义)。