Winkel 2 ag-Raster ts Code: Can not Probe Auto Gitter machen auf Zeile reagieren klicken

Question

Dies ist etwa Winkel 2 ag-grid ts Code

Ich bin neu in Angular (beide 2 & JS); Ich brauche einen Zeilenklick, der in einer Funktion mit übergebenem Zeilenobjekt erfasst wird. Ziel ist es, ein Formular zum Bearbeiten einer Zeile zu erstellen.

Ich arbeite an „Cars“ grid Beispiel in vorgesehen ag-grid-angular2-beta-ts-master.zip

Innen gridOption, lege ich:

onRowClicked: function(event) { console.log('a row was clicked'); 

Aber die Ausführung geht nicht dorthin, wenn ich auf eine Rasterzeile klicke. Kann mir bitte jemand sagen, was ich falsch mache? Bitte beachten Sie den unten stehenden modifizierten Beispielcode (SampleAppComponent.ts). Vielen Dank im Voraus.

import {Component} from 'angular2/core'; 
import {AgGridNg2} from 'ag-grid-ng2/main'; 
import {GridOptions} from 'ag-grid/main'; 
import {GridOptionsWrapper} from 'ag-grid/main'; 
import {GridApi} from 'ag-grid/main'; 
import {Car} from './car'; 
import {CarService} from './car.service'; 

import 'ag-grid-enterprise/main'; 

var gridOptions: GridOptions; 
var carService: CarService; 


function myRowClickedHandler() { 
    console.log('the row was clicked'); 
} 


console.log("Component start"); 
@Component({ 
    selector: 'app', 
    template: `<ag-grid-ng2 
       class="ag-fresh" style="height: 300px" 
       [columnDefs]="columnDefs" 
       [rowData] = "rowData" 
       [enableColResize]="true" 
       [singleClickEdit]="true" 
       [enableSorting]="true" 
       [enableRangeSelection]="true" 
       (cell-clicked)="onCellClicked($event)" 
       > 
       </ag-grid-ng2> 
       `, 
    directives: [AgGridNg2], 
    providers: [CarService] 
}) 
export class SampleAppComponent { 

    private gridOptions: GridOptions; 
    private rowData: Object[]; 
    private api: GridApi; 


    constructor(private _carService: CarService) { 
    console.log("in Grid constructor..."); 
    carService = this._carService; 

    this._carService.getCars().then(CARS => this.rowData = CARS); 


    this.gridOptions = { 
     onRowClicked: function(event) { console.log('a row was clicked'); } //Doesn't work, never get here when I click 
    } 

    } 

    columnDefs = [ 
     { headerName: "Make", field: "make" }, 
     { headerName: "Model", field: "model" }, 
     { 
      headerName: "Price", 
      field: "price", 
      cellClass: 'rightJustify', 
      cellRenderer: function (params: any) { 
       return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria 
      } 
     }, 
     { headerName: "Year", field: "year" }, 
    ]; 

/* 
    // put data directly onto the controller; changed it, now it's set in service via mock-cars.ts 

    rowData = [ 
     { make: "Toyota", model: "Celica", price: 35000, year: 2013 }, 
     { make: "Ford", model: "Mondeo", price: 32000, year: 2014 }, 
     { make: "Porsche", model: "Boxter", price: 72000, year: 2015 }, 
     { make: "Honda", model: "CRV", price: 33000, year: 2016} 
    ]; 
*/ 

}; 

Answer 1

Ich würde eher das Ereignis für die Komponente direkt konfigurieren:

<ag-grid-ng2 
      class="ag-fresh" style="height: 300px" 
      [columnDefs]="columnDefs" 
      [rowData] = "rowData" 
      [enableColResize]="true" 
      [singleClickEdit]="true" 
      [enableSorting]="true" 
      [enableRangeSelection]="true" 
      (rowClicked)="onRowClicked($event)" // <----- 
      > 
</ag-grid-ng2> 

aus dem doc Zitat (https://ag-grid.com/best-angular-2-data-grid/index.php):

Events: Alle Daten aus dem Gitter kommt durch Ereignisse. Diese verwenden Angular 2 Event Bindings zB (modelUpdated) = "onModelUpdated()". Wenn Sie mit dem Raster interagieren, werden die verschiedenen Ereignisse festgelegt und Text an die Konsole ausgegeben (öffnen Sie die Entwicklerwerkzeuge, um die Konsole zu sehen). finden Sie in der Liste der unterstützten Ereignisse:

• https://ag-grid.com/javascript-grid-events/index.php

Answer 2

Sie benötigen die RowClicked Ereignis im HTML und das Verfahren auf die Komponente

@Component({ 
    selector: 'app', 
    template: `<ag-grid-ng2 
       class="ag-fresh" style="height: 300px" 
       [columnDefs]="columnDefs" 
       [rowData] = "rowData" 
       [enableColResize]="true" 
       [singleClickEdit]="true" 
       [enableSorting]="true" 
       [enableRangeSelection]="true" 
       (cell-clicked)="onCellClicked($event)" 
       (rowClicked)="onRowClicked($event)" 
       > 
       </ag-grid-ng2> 
       `, 
    directives: [AgGridNg2], 
    providers: [CarService] 
}) 
export class SampleAppComponent { 

    [...] 
    onRowClicked() { 
     console.log('a row was clicked');   
    } 
}