Question

这是关于 angular 2 ag-grid ts 代码

我是Angular的新手（2＆amp; JS）;我需要在传递行对象的函数中捕获行。目标是创建一个用于编辑行的表单。

我正在研究 ag-grid-angular2-beta-ts-master.zip

中提供的“ Cars ”网格示例

在gridOption内，我说：

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

但是当我点击网格行时，执行不会到那里。有人可以告诉我做错了什么吗？请参阅下面的修改示例（SampleAppComponent.ts）代码。提前谢谢。

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

我宁愿直接在组件上配置事件：

<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>

引自doc（https://ag-grid.com/best-angular-2-data-grid/index.php）：

事件：网格外的所有数据均来自事件。这些使用Angular 2事件绑定，例如（modelUpdated）=“onModelUpdated（）”。当您与网格交互时，会修复不同的事件并将文本输出到控制台（打开开发工具以查看控制台）。请参阅支持的事件列表：

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

Answer 2

您需要将html中的RowClicked事件和方法添加到组件

@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');        
    }
}

角度2 ag-grid ts代码：无法使样品车网格在行点击

2 个答案: