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

Question

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

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 的某个按钮时显示弹出窗口？

Answer 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",
      }
    ];

Answer 2

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

Answer 3

试试这个

 onRowClicked(event) {

    this.dialog.open(CommentsComponent);
  }