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

我们可以在(rowClicked)="openDialog()"标签中添加函数<ag-grid-angular>，该函数将在组件中调用openDialog方法。在这里，我们可以编写代码以打开对话框。

Answer 2

您可以使用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 3

尝试

 onRowClicked(event) {

    this.dialog.open(CommentsComponent);
  }

如何在角度6中的农业网格数据上添加弹出窗口？

3 个答案: