时间戳

首页 > 解决方案 > 如何在角度 6 中添加 ag-grid 数据的弹出窗口？

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

问题描述

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

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

标签： angularangular6ag-gridag-grid-angular

解决方案

您可以使用 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();
    }

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

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

而不是你可以在你的 columnDefs 中使用：

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

推荐阅读