У меня проблема, когда я хочу использовать метод компонента 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

Я не очень понимаю, что здесь происходит ... Это из-за вызова метода подписки?

3
eli0T 24 Апр 2017 в 17:24

2 ответа

Лучший ответ

Вы пытались использовать метод Function.prototype.bind(), который позволяет вам указать значение, которое следует использовать как this при срабатывании обратного вызова?

Нравится:

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

Если вы не укажете, какое значение следует использовать как this, значение this внутри обработчика является ссылкой на элемент (и, следовательно, undefined ).

3
Tobold 24 Апр 2017 в 14:57

Здесь происходит то, что, когда ваше rowClicked событие инициируется, this в this.goToDetail(event.data.uuid); не выполняется с сайта вызова, вы можете подумать, что он выполняется с. Как бы вы это ни написали, вы можете подумать, что это call-site класса AllComponent, но на самом деле это не так, это то место, откуда вызывается ваш прослушиватель событий, а во время выполнения this не ссылается на твой класс.

Ответ Тоболда - это одно из решений, но вы также можете попробовать его с помощью «жирной стрелки»:

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

Здесь ваша myRowClickedHandler функция всегда будет иметь правильное «this».

2
eminlala 24 Апр 2017 в 15:12