Как открыть Modal Dialog из ячейки ag-grid, нажмите Angular 6

Question

Хочет открыть диалоговое окно мат по щелчку на иконке детали. Но вопрос «это» не относится к классу. Это относится к текущей сетке.

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
     }
 });

Ошибка: невозможно получить свойство 'open' с неопределенной или нулевой ссылкой

Здесь это относится к Grid, а не к классу.

Как я могу обратиться к методу класса, чтобы открыть диалоговое окно?

Ценю всю помощь и предложения.

Спасибо

Answer 1

Inline cellRenderer может использоваться только для простых случаев. Если требуется использовать функции внутри или подключаться к сторонним библиотекам, он должен быть записан как пользовательский компонент средства визуализации ячеек .