Angular 11 Ag Grid 在一列中显示单选，并仅根据单选单击进行行选择

Question

我正在使用

ag-grid

（在

Angular

项目中）渲染表格，我想在一列中显示带有相应单选的行，当我单击它时，仅选择行的行而不是整个行选择。我在

ag-grid

文档中找不到任何内容。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  frameworkComponents;
  rowData: any;
  columnDefs: any;
  constructor() { }
  ngOnInit() {
    this.columnDefs = [{
      headerName: "Select",
      field: "select",
      width: 100,
      cellRenderer: "radioSelector",
    },
    {
      headerName: "AgentName",
      field: "agentName",
      width: 150,
      sortable: true,
      suppressMovable: true,
    }];
    this.rowData = [
      {
        select: 1,
        agentName: "Bob",
      },
      {
        select: 4,
        agentName: "Joe",
      }
    ];
    this.frameworkComponents = {
      radioSelector: RowSelectionComponent
    };

  }

}

<ag-grid-angular class="ag-theme-alpine agGridHeightDesktop agGridHeightLDesktop agGridHeightIpads" [frameworkComponents]="frameworkComponents" [rowData]="rowData" [columnDefs]="columnDefs"
                style="width: 100%;">
            </ag-grid-angular>

import { ICellRendererParams } from 'ag-grid-community';
import { AgRendererComponent } from 'ag-grid-angular';
import { Component } from '@angular/core';
@Component({
  selector: 'app-row-selection',
  templateUrl: './row-selection.component.html',
  styleUrls: ['./row-selection.component.scss']
})
export class RowSelectionComponent implements AgRendererComponent {

   params: ICellRendererParams;

    agInit(params: ICellRendererParams): void {
      console.log("cell render ..",params);
        this.params = params;
    }

    refresh(params:ICellRendererParams):boolean{
      return true;
    }

    onChange(event) : void{
      console.log("event  .. ",event);

    }


}

<div class="radio-container">

    <input type="radio" (change)="onChange(params.value)" /> {{params.value}}
</div>

我很乐意在那里渲染一个单独的自定义组件。关于如何做到这一点有什么想法吗？

欢迎任何解决方法或建议。

谢谢你。

I am in progress to understand the Angular Ag grid. so simple expectation is to display row data with radio button.

Answer 1

我们不需要自定义组件来显示单选按钮，我们也可以在没有自定义组件的情况下实现它。

请参阅下面的内容。

  this.columnDefs = [{
    checkboxSelection: false,
    headerName: "Select",
    field: "select",
    width: 100,
    cellRenderer: function cellTitle(params) {
      let cellValue = '<div class="ngSelectionCell"><input style="-webkit-appearance:radio;" name="selected" type="radio"></div>';
      return cellValue;
    }
  },
{
  headerName: "AgentName",
  field: "agentName",
  width: 150,
  sortable: true,
  suppressMovable: true,
}];

对我来说效果很好。对于选择行，请使用以下功能

onCellClicked($event) {
console.log($event.column.getColId());
console.log($event.node.data);   

}