如何在角度 6 中添加 ag-grid 数据的弹出窗口？

Posted 2023-03-28

【中文标题】如何在角度 6 中添加 ag-grid 数据的弹出窗口？

【英文标题】：How to add pop up on ag-grid data in angular 6?

【发布时间】：2019-06-07 08:44:24

【问题描述】：

我有一个模型，它的答案是字符串数组。

export class answer 
question:string;
...
answers: [];

在组件中，我正在设置要在 UI 上显示的数据。

...

        this.subscription = this.httpService.getAnswers().subscribe(answers => this.rowData=answers;);
...

columnDefs = [
headerName: 'question', field: 'question'
,
...
headerName: 'Answer', field: 'answers'

];

在 html 上

<ag-grid-angular
  style="width: 800px; height: 100%;"
  class="ag-theme-balham"
  [enableSorting]="true"
  [pagination]="true"
  [enableFilter]="true"
  [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

数据显示正确，但我不想在同一个网格上显示答案，而是在弹出窗口上显示，他们可以更改答案或添加完全可以的答案 不同的组件。如何在点击 ag-grid 的某个按钮时显示弹出窗口？

【参考方案1】：

您可以使用 Cellrenderer 表单制作具有按钮或图标的列，并添加单击按钮/图标的方法。您可以使用此方法打开对话框。比您可以重复使用您的单元格渲染器。您还可以将数据从选定行传递到弹出窗口。一些信息链接：https://www.ag-grid.com/javascript-grid-cell-rendering-components/ 在这里您可以了解如何使用不同的单元格渲染器解决方案。

如果您想制作自己的单元格渲染器，您可以使用：

import Component from "@angular/core";
import ICellRendererAngularComp from "ag-grid-angular";
    
    @Component(
        selector: 'child-cell',
        template: `<span><button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-info">Invoke Parent</button></span>`,
        styles: [
            `.btn 
                line-height: 0.5
            `
        ]
    )
    export class ChildMessageRenderer implements ICellRendererAngularComp 
        public params: any;
    
        agInit(params: any): void 
            this.params = params;
        
    
        public invokeParentMethod() 
            this.params.context.componentParent.methodFromParent(`Row: $this.params.node.rowIndex, Col: $this.params.colDef.headerName`)
        
    
        refresh(): boolean 
            return false;
        
    

您可以通过单击自己的 cellRenderer 来使用 methodFromParent。 你可以像这样在你的父母身上使用。

        methodFromParent(rowIndex) 
        console.log(row);
        this.openMydialogPopUp();
    

你必须在你的html标签ag-grid-angular中使用[frameworkComponents]="frameworkComponents" 并且您必须将属性添加到您的 component.ts 文件中：

this.frameworkComponents = 
      yourOwnNameOfCellRender: nameOfCellRenderComponent(ChildMessageRenderer for this example),
    ;

你可以在你的 columnDefs 中使用：

    this.columnDefs = [
      
        headerName: "HeaderName",
        field: "value",
        cellRenderer: "yourOwnNameOfCellRender",
      
    ];

【讨论】：

还需要添加以确保使用 componentParent 初始化网格选项示例：constructor() this.gridOptions = context: componentParent: this ; ***.com/questions/41483952/…

【参考方案2】：

我们可以在<ag-grid-angular>选项卡中添加一个函数(rowClicked)="openDialog()"，它将调用组件中的openDialog方法。这里我们可以写一段代码来打开对话框。

【参考方案3】：

试试这个

 onRowClicked(event) 

    this.dialog.open(CommentsComponent);