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的值是对元素的引用（因此， undefined ）。

Answer 2

这里发生的事情是，当您的rowClicked事件被触发时，this中的this.goToDetail(event.data.uuid);未在呼叫网站上执行，您可能会认为它已被执行。你编写它的方式，你可能认为它的调用站点是AllComponent类，但实际上并非如此，它就是调用事件监听器的地方，并且在执行时，this没有引用你的班级。

Tobold的回答是一个解决方案，但您也可以尝试使用'胖箭'：

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

在这里，您的myRowClickedHandler函数将始终具有正确的'this'。

无法读取undefined angular2的属性

2 个答案: