具有组件功能的列模板

Question

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

注意到，我不习惯选择行。只调用一个函数。

看看我的第一篇专栏：

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将在单击单元格时选择行，通过将其作为gridOptions中的属性之一传递，可以禁用该行。

suppressRowClickSelection: false