如何从 ag-grid 单元格中打开模态对话框单击 Angular 6答案

【问题标题】：How to open Modal Dialog from ag-grid cell click Angular 6如何从 ag-grid 单元格中打开模态对话框单击 Angular 6
【发布时间】：2019-09-22 11:22:51
【问题描述】：

想要在点击详细图标时打开一个垫子对话框。但问题是this 不是指类。它指的是当前的网格。

    constructor(private dialog: MatDialog) {}

    ngOnInit() {
     this.gridOptions = <GridOptions>{
     rowSelection: 'multiple',
     floatingFilter: true
    };

    this.gridOptions.columnDefs = [
      { 
        headerName: 'Detail', field: '', filter: false, width: 80,
        sortable: false,
        onCellClicked: this.openModal,
        cellRenderer: (data) => {
          return `<mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true">
          keyboard_capslock</mat-icon>`;
        }
     },
     { headerName: 'Field Name', field: 'fieldName'}
    ];    

    openModal(row): void {
       const detailRef = this.dialog.open(DetailComponent, {
         height: '100vw',
         width: '80vh',
         direction: 'ltr',
         data: {
          record: row.data
         }
     });

Error: Unable to get property 'open' of undefined or null reference

这里指的是 Grid 而不是类。

如何参考类方法打开对话框？

【问题讨论】：

使用的上下文：{ parentComponent : this} with cellClicked

标签： angular-material angular6 ag-grid

【解决方案1】：

内联cellRenderer 只能用于简单的情况。如果需要使用内部函数或连接第三方库，必须写成custom cell renderer component。

【讨论】：

感谢解决了我的问题，但想知道如何在 close 方法之后在内部使用“this”（指的是类而不是模态窗口）。