具有组件功能的列模板

Question

我想要一个带有复选框的列，点击将调用组件中的一个函数。

注意我不习惯 select 该行。只调用一个函数。

看看我的第一栏：

constructor(){
   this.columns = [
            { width: 30,  suppressSorting: true, suppressMenu: true, template: '<input type="checkbox" (change)="updateSelectedList()"/>' },
            { headerName: "Score", field: "severity", filter: 'number' },
            { headerName: "Behaviour tags", field: "tags" },
            { headerName: "Host", field: "host" },
            { headerName: "Time", field: "lastModified" },
            { headerName: "ID", field: "alertId" },
            { headerName: "Assigned", field: "userName", editable: true, cellEditor: "select", cellEditorParams: { values: this.users.map(u => u.userName) } },//},
            { headerName: "Grouped" },
            { headerName: "Comments" }
        ]
}


updateSelectedList(row: RowNode) {
        if (row.isSelected())
            this.checkedAlerts.push(row.data);
        else
            this.checkedAlerts.splice(this.checkedAlerts.indexOf(row.data), 1);
    }

模板中的调用：

<ag-grid-ng2 [rowData]="alerts | listToArray" [columnDefs]="columns" (rowClicked)="$event.api.selectNode($event.node)" (rowSelected)="updateSelectedList($event)" (cellValueChanged)="onUserSelect($event)"></ag-grid-ng2>

Answer 1

您的专栏模板没问题。默认情况下，当您单击单元格时，ag-grid 将 select 该行，您可以通过将其作为 gridOptions

中的属性之一传递来禁用它

suppressRowClickSelection: false

具有组件功能的列模板

column template with components functionality

ag-grid

angular