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

Posted 2023-03-28

【中文标题】如何从 ag-grid 单元格中打开模态对话框单击 Angular 6

【英文标题】：How to open Modal Dialog from ag-grid cell click 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

【参考方案1】：

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

【讨论】：

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